Best Alternative to Float in CSS – Using Flexbox

One of the best and upcoming alternatives to float style layouts in CSS in the flexbox module that is new in CSS3. This allows you to create dynamic or set width layouts very easily. The flexbox module is called by setting the display attribute to box. From there you set the box-flex attributes of the containing elements equal to what amount of their parent you want them taking up. This sounds a little confusing so lets look at some code.

#contain {
display: box;
display: -webkit-box;
display: -moz-box;
}

.box1, .box3 {
	box-flex: 1;
	background: yellow;
}

.box2 {
	box-flex: 2;
	background: red;
}

<div id="contain">
	<div class="box1">
		Takes up 25%
	</div>

	<div class="box2">
		Takes up 50%
	</div>

	<div class="box3">
		Takes up 25%
	</div>
</div>

As you can see, setting the box-flex value to how many “columns” you want each div to take up. While it does not actually use columns, it more like what percentage you want it to take up. This will be fluid unless you set a specific width for the container.