Assorted notes on recent experiences I’ve had with large amounts of blank space in websites. For smaller amounts you can check out my much earlier post on eliminating white space.

1.) On one site I set display: table on the content and sidebar so they would always be the same height. Later we made a page on which the page title was hidden and the first element in the content was an embedded video (wrapped in a couple of divs to allow responsiveness). In Chrome and Firefox that was fine; in Safari and IE the sidebar was pushed down. Safari’s developer tools showed it as padding, but far more than the pixel value listed. I realized the title of the first sidebar widget was lined up with the line of text under the video in all cases, from which I diagnosed that the browser was interpreting that line of text as the first thing in the cell. Setting vertical-align: top on the sidebar cured it. (In the reverse direction, when JavaScript is inactive the sidebar has a large top margin to accommodate the click-to-show menu being always visible, and the main content needs vertical-align: top to be positioned correctly.)

2.) I used CSS columns on a widgetized area on the footer of my page and ended up with a pile of whitespace after the end of the page content. The space wasn’t associated with any particular element. It turned out the order of rendering operations led to an absolutely positioned element being placed far down the page prior to the widgets being converted to columns and hence reducing their reach. The item was a bit of screen-reader-only text for the search widget and hence was a 1×1 pixel box, for all intents and purposes invisible. I found that exact problem on Stack Overflow, which gave me the diagnosis and the fix: set position: relative on the widgets.

3.) A different set of CSS columns had some whitespace above certain elements. This turned out to be another display: table problem rather than a column problem. This time, the display was set on the :before pseudoelement. Underscores uses a float clearing fix involving setting display: table on the :befores of a set of classes, and in this one case it was causing extra whitespace. Changing it to display: block for that particular page fixed it. It is possible there would be a vertical alignment fix for this as well, but its appearance was irregular and hence hard to test with.