oxrg4a
Last Updated: February 25, 2016
·
1.265K
· sheerun
Photo on 08.01.2013 at 04.15

Float blocks without floats

css

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

Say Thanks
Respond

5 Responses
Add your response

49
Avatar

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

Great point! :)

over 1 year ago ·
3763
Cc4718acc53c63eee2c50ffd3fda9450

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

over 1 year ago ·
3767
D42a7264714dee5006b9c99d2567a320

Just remember to take care of the whitespace between blocks!

over 1 year ago ·
3769
1358ed881a9c3c7fc9dba441fc7fa0cc

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 ·
3840
Headshot cropped800

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 ·