Clearing block affects wrong floating
- by HiveHicks
I've got two-column layout
<div class="left-pane">
Left pane
</div>
<div class="central-pane">
<div>
<ul class="customers-types-tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<div>Main content</div>
</div>
and the stylesheet:
.left-pane {
width: 248px;
float: left;
background-color: #f6f6f6;
border: 1px solid #e6e6e6;
padding: 20px 5px;
}
.central-pane {
margin-left: 270px;
}
.customers-types-tabs li {
background-color: #f6f6f6;
border: 1px solid #d5d5d5;
line-height: 38px;
padding: 0 20px;
float: left;
margin-right: 10px;
position: relative;
top: 1px;
}
The problem is that I want "Main content" to appear right below the div with ul inside it (that represents tabs control), but if I set Main content's div's style to clear: both, it appears below the left pane, which is taller than the ul. What should I do to get correct position of main content?
