Back to post: Should You Use Inline-Blocks As A Substitute For Floats?

An issue with floats

One
Two
Three
Four
Five
Six
Seven
Eight

The issue with floating images (or css boxes) is illustrated above. Your browser will need to be open wider than 768px to see it. If not, you can click here to get back to post and see an image of how it should look. Because box 2 has the greatest height in the first row, the next row of boxes gets hung to it's right.

This is a common problem with images, which often vary in height. As more rows of images appear, more empty spaces randomly show up in the grid as some images get hung and can't reach the left edge. Most solutions aren't particularly dynamic and don't work well when the images are added through a content management system.

is solved with inline-blocks

One
Two
Three
Four
Five
Six
Seven
Eight

Because inline-blocks remain in the normal document flow, the new row drops down below the image (or css block) with the greatest height. It can't get hung when heights vary.

The blocks here are set to vertical-align: top, but that can be changed to a variety of other values. It should be noted that a table (html or css) could have been set up to achieve the same result.

Floats, Inline-Blocks, and Document Flow

The span to the left has been floated to the left. You can see that text is able to flow around it. It aligns vertically at the top and that alignment can't be changed. I nudged it down slightly with a 5px top margin so the top of the block aligns with the top of the text.

The span to the left has been set to display as an inline block. I set it's vertical alignment to top and nudged it down 5px. However, text can't flow around it because it remains in the normal document flow.

The Whitespace issue with inline-blocks

The blocks above and the blocks below are identical with one exception. Each is an empty div with a couple of classes added. One class sets the display of the block to inline-block. The other class sets the size and background color.

Above the html for each div is on a new line. There is a newline character between them. Below the html for each block sits on a single line, one after the other, with no space between them. By default inline-blocks display any single whitespace character around them.