Web Standards Tips

Practical advice for building websites with web standards

Web Standards Tips: float

You are currently browsing the Web Standards Tips archives for the tag float.

The empty div clearfix anti-pattern

By Isofarro on March 8th, 2010 - No comments

The common approach to laying out a page is through the use of float. A container floated left becomes a left-hand sidebar. And even within components of a page, the float is used to create columnar layouts. The symptom of float-based layouts One of the side-effects of using floats for layout is that the element […]

Filed in CSS Tagged with , , , , , ,

Easy clearing of floats

By Isofarro on November 18th, 2008 - 2 comments

One of the main methods of creating stable layouts is to ensure that elements that contain floated elements clear these floats. Given an element with an id of wrapper, the styles needed to easy clear any contained floats is: #wrapper:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } #wrapper { zoom: […]

Copyright © 2007 - 2009, isolani