I am having problems clearing a floated object in the center column of a 3 col layout. The 3 col layout has floating left/right columns. In the center I am floating a div to the left. When I attempt to clear the object in the center it attempts to clear the left column instead. I give up. Please help
Sample code is posted below:
<!DOCTYPE html>
<html>
<head>
<style>
div { padding: 10px; }
#main { width: 500px; background-color: green; }
#leftcol { float: left; width: 100px; height: 175px; background-color: Yellow; }
#rightcol { float: right; width: 100px; height: 300px; background-color: Orange; }
#centercol { margin-left: 120px; margin-right: 120px; background-color: White; }
#centerGrayBox { float: left; width: 75px; height: 100px; background: grey; display: block; }
#centerBlueBox { clear: left; background-color: Blue; }
#bottomBox { clear: both; background-color: Purple; }
</style>
</head>
<body>
<h2>Basic 3 col layout</h2>
<div id="main">
<div id="leftCol">
float: left;<br />
width: 100px<br />
</div>
<div id="rightCol">
float: right;<br />
width: 100px<br />
</div>
<div id="centerCol">
#centerCol<br />
<div id="centerGrayBox">
float: left;<br />
width: 75px;
</div>
i want to clear the grey box so the next div is right under it.
<div id="centerBlueBox">
clear:left puts this box too far down...I want this div to be right under the grey one!
</div>
</div>
<div id="bottomBox">#bottomBox (clear: both)</div>
</div>
</body>
</html>
Which browser(s) are you using? I’ve tested it in Firefox8 and Chromium on Linux, and it seems to be doing exactly what you want i.e. the blue div sits immediately under the grey div, with no space in between. Your screen-shot is still pending approval, so maybe I’ve misunderstood the problem.
When you clear a float you clear all floats above it in the html which in your case is the floated left column so the element moves down below the left column just as you told it to do :). To contain the effect of the clear property the element must have a parent that establishes a new block formatting context. Elements which create block formatting contexts are floats, elements with overflow other than visible, elements with display:inline-block or table-cells.
The easiest solution in your case is to add an inner 100% wide floated element in the middle column to contain all the content in that column and to stop the clear affecting floats outside that current context.
You can do it without an extra div by using overflow:hidden on your centre column (and applying haslayout for IE6) but does mean that overflowing content may be hidden and possible a scroll bar may not appear when needed.
This old demo explains the problem and shows the solution.
The OPs demo is flawed as they have used camelCase in the html so the demo isn’t working unless you change the classes to match the css