CSS Alternative to Left Float

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

	<style type="text/css" media="screen">
		.codeexample span {
			background-color: #68B6FF;
			-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255, 255, 255, 0.8)));
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			margin-right: 10px;
			margin-bottom: 40px;
			width: 140px;
			padding: 10px;
		}
		.inlinebox1 {
			display: block;
			float:  left;
			min-height: 32px;
		}
 
		.inlinebox2 {
			display: -moz-inline-stack;
			display: inline-block;
			vertical-align: bottom;
			zoom: 1;
			*display: inline;
			min-height: 32px;
			_height: 32px;
		}
 
	</style>
 
	<div class="codeexample">
		<h3>Float: left</h3>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
 
		<h3 style="clear: both;">Inline Block</h3>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
	</div>

Embed Assets in Flash Project

There’s still quite a gap between Flash and Flex – while Flash is great for creating animations, vector symbols and just keeping little assets within one place, Flex Builder is so very much better for anything code. So how to link those two together?

Though I’ve written some posts about how to code within Flex Builder and compile from there using Flash IDE, I personally don’t like that at all and only use it for some few older AS3 projects. There are better methods, ways to compile from within Flex Builder while still being able to make use of Flash comfort.

There’s a neat way to embed a library without loosing any functionality (like little scripts). I’ve first seen it at Grant Skinner (who’s doing great stuff, one of my favorites in the flash community really). Let’s say, you have a assets.fla and a published assets.swf. Now here we go: (more…)