3 Column Fluid layout using Float

The Explanation : In the following HTML code you will see that <div class="mid">...</div> appears below <div class="right">...</div>, when <div class="left">....</div> is floated left then it is removed from normal flow or static positioning & in same way float right DIV moves up and goes to the right and it is also removed from normal flow. Following the properties of float they appears in same level.

These two left and right floated DIVs create a vacancy for next DIV (the mid div as it is in HTML code below). So this DIV moves up and place it between them. So the trick is place the MID DIV in html code at the end.

Feel free to interchange the position of mid div and check what happens.

HTML Code:

<div class="left">....</div>
<div class="right">...</div>
<div class="mid">...</div>


left Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
right Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.
mid Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.