Hands-On UX Design for Developers

Float-based layout

The float layout is an old approach to CSS layout, which was introduced in the first half of 2000. At the beginning, it was meant to be used for images to float right or left inside text columns.

Recently, it has been used to float divs with the entire content inside them to the right or left. You can still find a lot of website nowadays using this approach.

There is nothing wrong with using this approach to CSS layout, but there are too many bugs since the float wasn't designed for this purpose, so you need to use different tricks to achieve a specific required layout based on the user interface that is provided by designers.

Let's take an example and create it using the float layout. Say we need a full-width header, which ...