Develop Reference

center button after change display mode

I have a problem with centering a button after I set it to display: block.
I've got a table:
<table border="0" id="contacts" width="100%">
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
<tr><td><div align="center"><button style="width:200px;">btn1</button></div></td></tr>
</table>
Both buttons are centered in the table. Now I switch the visibility with:
document.getElementById("contacts").style.display = "none";
The table and buttons are invisible. After I switch the visibility back with:
document.getElementById("contacts").style.display = "block";
The buttons are aligned to the left. How can I center the buttons again?

First, do not use a table structure for formatting. Tables have their place, but using them as HTML scaffolding is so 1990. Instead, use DIVs with css.
Break your page up into several outer boxes, or containers. (For this, you can use DIVs - you can use DIVs for just about all containers - or sections or other container elements depending on your need for extra SEO cred.)
Within each outer container (div), you then subdivide into the type of layout you need (again, using divs). Then, within each sub-area, again use divs (or other container element) to do any further sub-divisions.
So, how to size / position all these things? Use CSS.
In css, there is a reason why the most important change from Bootstrap3 to Bootstrap4 is moving from floats to flexbox. Floats was the old way to position items; flexbox (and CSSGrid) are the new way. Flexbox is dead easy.
Flexbox requires two things:
A parent container (e.g. DIV, section, aside, p, etc)
One or more child elements (e.g. div, p, img, etc)
Here is an excellent 5min video tutorial
Here is a great cheatsheet

You would use document.getElementById("contacts").style.display = "table";

You could also give it a class "align-content-center" in this example
<table border="0" id="contacts" width="100%">
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
<tr>
<td>
<div class="align-content-center">
<button style="width:200px;">btn1</button>
</div>
</td>
</tr>
</table>
and then just style your div around the buttons
.align-content-center{
width: 100%;
text-align: center;
}

Display three divs by order absolute than fixed than relative

I have some problems when rendering on only app(iOS) NOT website:
I have to use pure Javascript without any other libraries.
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" style="position:relative">
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
The Cover div didn't display overlapping Header. What can I do to that?
I want that initially user will see Cover first, then scroll up then see fixed Header and eventually Content.
I dont want to change the HTML, because when I put header in content div, header usually jumps and take moment to back the correct position when scrolling content div.
Thanks for any help!

Give #content a z-index property, too. Say, 100.
The problem looks like z-index context. z-index is not a global value - it is relative to it's parent. You have #header with z-index:99, and it's sibling #content with z-index:auto(say 1 for argument's sake). #header always overlaps #content, and its children.

You are using absolute property to cover class, relative to content className that means, it position will change according to content class. Remove relative property to content class, add wrapeer to all header and content className.
<div style="position:relative">
<div class="header" style="position:fixed; z-index: 99;"></div>
<div class="content" >
<div class="cover" style="position:absolute; z-index:999;"></div>
//some text content
</div>
</div>

How to fit a list of images in an HTML div to form a 2D grid?

EDIT: Problem fixed. See my own answer for details. Will mark it as the answer in 2 days when SO lets me.
I am populating a div with a list of square images using Knockout. The div is currently of fixed width and height, though will eventually be resizeable. I would like the images to fill up the div row by row. So when image n reaches the boundaries of the div's width, image n+1 is wrapped around to the next row. Currently, the images flow over the boundaries of the div to fill the entire window.
The current markup is as follows:
<div data-bind="foreach: images" width="500" height="500">
<img data-bind="attr: { src: fileName }">
</div>
I've played around with float and overflow with no success so far. I've also tried putting the images in their own divs. The images exhibit the wrapping behaviour I want in the whole window to form a grid, just not in the div I've put them in.
How do I make the images stay inside the div while getting the grid that I want? Is this possible with HTML/CSS alone or does it require some Javascript?

As Daniel Weiner said in his comment - floats are the way to go. Add in display : inline-block; to keep each element aligned. Example:
#container {
width: 100%;
background-color: black;
display: inline-block;
}
.block {
height: 100px;
width: 100px;
background-color: #fff;
margin: 10px;
float: left;
}
<div id=container>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">4</div>
<div class="block">5</div>
<div class="block">6</div>
<div class="block">7</div>
<div class="block">8</div>
</div>

My problem was that I was not specifying the length units for my containing div. In my original markup, I was using the HTML attribute width="500". Changing this to inline CSS and specifying the length unit solved the problem, keeping my 2D grid inside the div: style="width: 500px"
Besides this, as suggested by wahwahwah, the following style was required for a containing div for each image: float: left;
Inlining the CSS, the end result is:
<div data-bind="foreach: images" style="width: 500px">
<div style="float: left;">
<img data-bind="attr: { src: fileName }">
</div>
</div>

Uniform div height and button alignment

I have three divs that need to be the same height and have a button at the same level, but are containing varying amounts of text above and below the button.
Right now I'm just specifying heights to compensate for how long the text might be, but if it's not that long, there's too much padding, and it still might not be high enough.
This needs to work with IE9+, and the latest chrome and firefox. I'm starting to think the best solution is javascript unless there's a CSS miracle. display: flex looked promising, but don't think it'll work with IE9
See image below. The space between the titles and the buttons should be controlled by the longest title. Right now it's just a hard coded height. Similarly card heights should be controlled by the tallest card, but it's currently hard coded.

Here's a solution using display:table which should get you started:
HTML
<div id="wrapper"> <!-- Sets the size of the entire section -->
<div id="row1"> <!-- Becomes your table row -->
<div id="cell1"> <!-- Becomes the table cell -->
<p>Information</p>
</div>
<div id="cell2">
<p>A section of text</p>
</div>
<div id="cell3">
<p>Some text and other stuff - even divs.</p>
</div>
</div>
</div>
CSS
#wrapper {
height:100%;
width:100%;
}
#wrapper div {
border:1px solid black;
}
#row1 {
display:table; /* Creates the table */
}
#row1 > div {
display:table-cell;
width:30%; /* Sets the width of each table cell */
height:auto; /* Expands the height of the entire row as content is added */
}
Here's a CodePen demo with a mockup. The nice thing about this is that you can still use HTML5 and CSS3 for all of your content and styling.

Here's an example of how to handle it with a <table> instead of divs--that way no js is required:
Table Demo

how can I make my table auto-adjust the heigth besed on the screen resolution

The table below is used to display a map and some relevant data( I cleaned everything for better readability). The left part is a "vertically scrollable table". The right part is a div that shows the google map.
It is set to 500px now and I am wondering how can I make it "fill" the available screen real-estate.
<div id="maparea">
<table style="width:100%; position:relative;border-bottom: 1px solid #888888;margin: 0 auto;" >
<tr>
<td width="120px">
<div style="padding : 4px; width : 196px; height:500px; overflow : auto;">
<div>
<table width="100%" style="border:1px solid #888888;padding : 0px;">
<tr>
<td style="font-size:xx-small;">
<b>Name: </b> name<br>
<b>Unit ID:</b> this is id<br>
<b>State:</b> IL <br>
</td>
</tr>
</table>
<table><tr><td></td></tr></table></div>
</div>
</td>
<td width="100%" height="100%">
<div id="googlemaps1" style="width:100%; height:500px;position:relative;margin: 0 auto;"> </div>
</td>
</tr>
</table>
</div>

Please check out this article i have below. You should not be using tables to layout or grid up your pages as you have done.
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Also just a hint as well, you shouldn't be using inline CSS styles it is very bad practice and makes modifying templates and pages very difficult in the future so use classes and a stylesheet to define any styles and/or layouts for yout pages. They are more dynamic and much easier to fix later on.
Demo of clean coding for you here: http://jsfiddle.net/nshJH/
Using <div>'s you can just use the
float: xxxx;
clear: xxxx;
This is a simple example of a clean fluid page for you that is dynamic to the content it contains. Also please note that i can change any of the width or text properties on the fly through one place in my CSS...

you can use a fixed or absolute position of the table and use bottom and top coordinates to fix the height.
table {
position: absolute;
top: 0px;
bottom: 0px;
width:100%;
}
greetings!

In order to stretch it out vertically, you have to set every nested element from html down to have height: 100%. Should look something like this:
html, body, #maparea, table, #googlemaps1 { height: 100%; }
For contrast:
Without the height CSS set
With