For the life of me, I can’t figure out why a certain area with padding disappears when my DIVs collapse from table layout to block layout at small widths. Notice that above my website name there is a space about 20px high. When the DIVs collapse, however, the space disappears. Why is this happening? [Edit: I made #footer green so you can see the difference better]
It would be best if you could post a “working page”, ie: starts with <!doctype ...>, ends with </html>, includes relevant code and actually demonstrates the problem. I don’t see anything disappearing when I put the above code into a “working page”. Perhaps something more is missing.
I went to your site and cannot see the trouble that you are describing. I’ve probably misunderstood something (not uncommon). Would you mind repeating the trouble, and maybe throwing in some annotated screen shots? It would help.
Yes, that is it. The vertical spacing between the domain and the top of the green shrinks when the DIVs collapse. Perhaps it is the vertical alignment. I can check that to tonight when I am home. Assuming that is it, why would it be vertically aligned near the top but not at the top?
Because, by default, table cells do not vertically align to the top of the table-cell, unlike the behavior of display:block which DOES align more to the top.
I assume that you wish to keep the taller spacing between the domain name and the top of the footer when the divs are {display:block} as it is when they are {display:table-cell}. Is that correct?
If that is true, #footer .col {vertical-align:top}alone will not fix the problem. Instead in addition, please add the following to the existing styles:
#footer .logo {
margin-top: 12px; /* seems like a good number */
}
@RyanReese is correct that table-cells do not necessarily align their contents to the top of the cell by default. The reason is that table-cells attempt to align their content between each other to the baseline {vertical-align:baseline}. It just so happens that the baseline in the other cells (2 thru 4) is exactly inline with the domain name in the first cell, so the default behavior is working as expected. But, why is the baseline so far from the top of the cells? Because the <strong> tags in cells 2-4 are assigned {margin-top:15px}. Therefore, the first cell is lower than the top of the cell because it is aligning with the baseline of cell #2. When the first cell becomes {display:block}, the domain name rises to the top, as expected, because it has lost the table-cell behavior whereas the other divs retain their top margin assignment (but this is difficult to see). ( To test my claim: if you delete strong {margin-top:15px} from cells 2-4, the domain name will rise to the top of the table cells along with the other columns.)
So the solution probably is to add #footer .logo {margin-top:12px} so it will have a similar margin pushing against the top as the other cells with the <strong> tags.
(I say “probably” because I’m speculating about your design intent. The alternative is to delete the margin-top from the <strong> tags.)
(PS: I did misunderstand the issue at first. Thanks for opening my eyes, @RyanReese.)
2015.01.27 23:29 Edited to fix a poor choice of words.
Reason: Adding {vertical-align:(other than baseline)} is a beneficial “reset” to apply to table-cells. I do so 99% of the time. Upon reflection, it sounded like I was saying that it wasn’t important, which was wrong. An adjustment to the margin-top was also needed.
.