I used to use float:left a lot for my layouts. But it can be a pain in the ass for several reasons – which of them the main may be that the surrounding box doesn’t surround it (so you’d have to come up with some stupid clearfloat-hacks).

Anyway, I recently discovered somewhere a great alternative (you can call it hack too, but then everything a little fancy that’s supposed to work with IE is a hack, isn’t it?).

So while until now I’d have something like this:

.inlinebox {
	float:  left;
	width: 49%;
	min-height: 100px;
}

the new method goes like this:

.inlinebox {
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	width: 49%;
	min-height: 100px;
	_height: 100px;
}

That’s looks quite more complex. And it certainly is. But it works like a charm on all browsers I’ve tested (IE7, Safari, FF3). _height, zoom and *display are some crappy IE hacks obviously. The zoom attribute by the way is quite interesting, as it activates the hidden (IE only) CSS attribute hasLayout.

It also has some very nice benefits, like the alignement to the bottom…

Example

View Example

	

	

Float: left

Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox

Inline Block

Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox

404