Question

a have three column layout and i want to have three divs inside the middle column, but every time my content in sidebars is “longer” than content in the middle div, boxes just jump down under “the longest div”. Here is my code:

<div style="float: left; width: 15%; background-color: yellow;">
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div style="float: right; width: 15%; background-color: pink;">
<p>right</p>
<p>right</p>
<p>right</p>
<p>right</p>
</div>
<div style="margin-left: 20%; margin-right: 20%;">
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="clear: both;"></div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
    <div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>
<div style="float: left; width: 20%; background-color: blue; margin: 1%">
    middle
</div>

​

Here is code on jsfiddle for better understanding. I would be glad if somebody could explain “clearing” to me.

Edit:
I followed this tutorial http://css.maxdesign.com.au/floatutorial/tutorial0406.htm

Answer 1

Your middle div is being presented as a block level element and is why is being pushed along with the content of your sidebar divs. Float it to the left and add a proper width to it to fix the issue. Middle div width = 20% + 20% margin + 15% + 15% sidebar widths = 70% + 30% middle div = 100%.

http://jsfiddle.net/DyHGP/5/