When the Internet was at its infant stage, sites was built with tables. That means the whole layout of the site was based on tables.

We will not get into why table layout is bad, but it is.

When css became the weapon of choice for web builders and designers, they started to use positioning to layout web pages. Flauts on the other hand was used mainly to position images in relation to text (just like they do in the print world).

In this sense, the use of flauts was very simple. lets give an example. in this example we have a div with an image inside and we want the text to wrap around the image:

#wrapper{

	margin:auto 0;

	width: 500px;

}

#wrapper img{

	float:right;


}


And the result is very predictable, and do exactly what we wanted.

This is very useful and still flauts is used in these circumstances.

With the increased use of css and the growing separation between the page and its design, it was evident that we can use css flauts to layout the page. Therefore people starting to use flauts and not positioning to layout web pages. But thing are not flawless.

Lets design a full page with flauts. We will want an header and footer section, we want a right sidebar ( I am an Hebrew talking man:) and obviously we want a content section.

The final result looks like so:

Oops, something went wrong. This is one of the main problems when you start using flauts: the sidebar here looks as if it is out of bounds. But before we`ll fix the issue we want to understand what happened wrong?

Well, when we use flaut the flauted element is "going out" of the natural flow of the page. A web page is built naturally vertically and when we flaut an element its as if we took it out of that flow and then its "empty" space is being taken by the next element.

Ok, so what now? Well css has a property called "clearing" with the abiluty to clear left, right or both.

We can use clear in several ways:

1. Add a tag with the clear property:

   
   .clear{
   
   clear: both;
   
   }
   
   
   
   
   

2. Adding a div with a class. Which is the same thing actually.
3. Adding overflow : auto to the wrapping element:

   
   #wrapper{
   
   overflow : auto;
   
   }
   
   
   
   
   

4. Adding the clear to the next element.

All these options are legitimate and works. It is up to you to decide what works for you.

From the point of view of a cleaner code the third and fourth are the cleanest (semantically).

Lets do the fix with the fourth option:

#footer {

	padding: 0 10px; 


	background:#ee6699;

	clear:both;

} 

Now our page will look like that:

Problem solved.

I really think that the most important thing to remember is that flaut put the flauted element outside the natural flow of the page, and the way we can clear the flaut. If we forget we will suffer a lot of frustrations.

Hope this was helpful:)