Tutorial by Examples

The most basic use of a float is having text wrap around an image. The below code will produce two paragraphs and an image, with the second paragraph flowing around the image. Notice that it is always content after the floated element that flows around the floated element. HTML: <p>Lorem ips...

A simple two-column layout consists of two fixed-width, floated elements. Note that the sidebar and content area are not the same height in this example. This is one of the tricky parts with multi-column layouts using floats, and requires workarounds to make multiple columns appear to be the same he...

HTML: <div class="wrapper"> <div class="left-sidebar"> <h1>Left Sidebar</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> </div> <div class="content"> <h1>Content</h1&g...

This layout uses one floated column to create a two-column layout with no defined widths. In this example the left sidebar is "lazy," in that it only takes up as much space as it needs. Another way to say this is that the left sidebar is "shrink-wrapped." The right content column...

The clear property is directly related to floats. Property Values: none - Default. Allows floating elements on both sides left - No floating elements allowed on the left side right - No floating elements allowed on the right side both - No floating elements allowed on either the left or the r...

The clearfix hack is a popular way to contain floats (N. Gallagher aka @necolas) Not to be confused with the clear property, clearfix is a concept (that is also related to floats, thus the possible confusion). To contain floats, you've to add .cf or .clearfix class on the container (the parent)...

The div is a block-level element, i.e it occupies the whole of the page width and the siblings are place one below the other irrespective of their width. <div> <p>This is DIV 1</p> </div> <div> <p>This is DIV 2</p> </div> The output of...

Setting overflow value to hidden,auto or scroll to an element, will clear all the floats within that element. Note: using overflow:scroll will always show the scrollbox