The Case Study : This is a simple CSS style sheet code of “Kolkata CSS web page layout expert Mr. B Choudhury“ where he explains the CSS- “three column liquid layout” where the mid column will be centered between left and right columns. Here % width has been used for the columns.
Left column floated left, right column floated right, Middle column of any width will be centered between them. The mid column will be centered with respect to left and right column, depending on their width and available space. (View it)
The assumption- Here left column is of width 20%. Right column is of width : 20%. Middle column is of width: 50%. Here the picture has been shown, and you will see that the all the columns in same row. You can put all the columns in a wrapper or container DIV. But float collapsing problem may occur for the following DIVs below the wrapper DIV but that is another issue.
HTML Code:
<div class="left">....</div>
<div class="right">...</div>
<div class="mid">...</div>
Style Sheet :
<style type=”text/css”>
.left{
background:#CFC;
width:20%;
float:left;
}
.mid{
background:#390;
width:50%;
margin:0 auto;
}
.right{
background:#6CF;
width:20%;
float:right;
}
</style>
Contact No. of CSS expert Mr. Choudhury (Phone +91-9163111390)
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, which is 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 and don’t apply float to this Mid DIV.
Feel free to interchange the position of mid div and check what happens. (Visit the link and check the error here)
View the HTML output of the above code