CSS Clear within float based columns?

Question

Hi all,

I'm floating a sidebar to the left of the main content panel. Then inside that panel, I have a number of boxes, which are floated and cleared in order to create a sort of grid (it's a "my account" page, with various boxes containing things like orders, edit details etc). The problem is that the boxes inside the content div are clearing against the sidebar, as opposed to just the other boxes in that div. There's a link to an image below if that explanation was confusing:

http://i.imgur.com/xFI8i.png

(Don't have the Rep to post images yet)

Has anyone come across this before, and if so, do you know a fix for it? I'm probably going about this the wrong way, but I learnt CSS almost entirely from trial and error, so my knowledge of the theory of it is most likely woefully lacking.

Answer 1

UPDATE ( with demo )

DEMO: http://jsbin.com/olica/2 CODE: http://jsbin.com/olica/2/edit

CSS

.clear {
    clear: both
}
.box {
    float: left;
}

HTML

<div class='clear'></div>
<div class='box'></div>
<div class='box'></div>
<div class='clear'></div>
<div class='box'></div>
<div class='box'></div>

Answer 2

If the content panel isn't floated, any elements inside will clear the sidebar float. Easy solution would be to float the content panel. Since you haven't posted html/css it's hard to really see the issue, though, and provide any suggestions for if you don't want to float the content panel.

Before

After

Answer 3

I believe you would want to selectively clear the floats on one side, like clear: right; or clear: left;

I haven't run into that issue though so I'm not sure.