Last Updated: February 25, 2016
· sheerun

Float blocks without floats


Captain Obvious here. Just treat block elements as inline ones:

display: inline-block;

This way you can use vertical-align: middle; and other attributes available only for inline elements while leaving block layout intact.

You'll be surprised how many quirks inline block can solve (comparing to float: left; solution).

Good responsive design is just one of them.

See also: Decouple JavaScript classes from CSS ones by using prefix

5 Responses
Add your response


Totally agree, just started using inline-block more, especially for responsive design stuff.

Great point! :)

over 1 year ago ·

as you say,how to choose display:inline-block and float

over 1 year ago ·

Just remember to take care of the whitespace between blocks!

over 1 year ago ·

Another thing to watch out for is the baseline it uses. You'll often use inline-block with say an image & then wonder why the next box is shunted down as if it had a top margin.

From the CSS2 spec:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

over 1 year ago ·

IE7 will mess up your UL > LI menus when you use inline-block. Make sure to pass IE7 display: inline, and it will treat LIs the same way that other browsers treat inline-block. This is the best way to center LIs in a UL and have them still line up next to each other (look like they are using float: left).

over 1 year ago ·