3 Column Fluid layout using Float

Left column floated left, right column floated right, Middle column of any width will be centered between them

Here left column is of width 20%. Right column is of width : 20%. Middle column is of width: 40%. Here the picture has been shown below, and you will see that the columns are not in same row, right column gone little bit down. Why ??

The Answer :In the following HTML code you will see that <div class="mid">...</div> appears before <div class="right">...</div>, There is no float for mid column, so when <div class="left">....</div> is floated left then it is removed from normal flow or static positioning & there exists a vacancy for the next mid DIV which is <div class="mid">...</div>.

But this mid DIV is not floated and next DIV below mid DIV will appear below it and mid DIV will not allow any DIV to appear in same row which is the basic property of a block level element.. So <div class="right">...</div> appears in NEXT line.

HTML Code:

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

Style Sheet :

<style type="text/css">
    .left{
            background:#CFC;
            width:20%;
            float:left;
    }
    .mid{
            background:#390;
            width:40%;
            margin:0 auto;
    }
    .right{
            background:#6CF;
            width:20%;
            float:right;
    }
</style>



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.
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.
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.