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
Written by Adam Stankiewicz
Related protips
5 Responses
Totally agree, just started using inline-block more, especially for responsive design stuff.
Great point! :)
as you say,how to choose display:inline-block and float
Just remember to take care of the whitespace between blocks!
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.
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).
Have a fresh tip? Share with Coderwall community!
