CSS Clear within float based columns?

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 o开发者_运维百科pposed to just the other boxes in that div. There's a link to an image below if that explanation was confusing:

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.

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

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.

You could try display:inline-block. But it is a new feature not that well supported. CSS is a dog, I just change my designs to fit in with what it can do.

https://learn.shayhowe.com/html-css/positioning-content/

Or, just use tables. Tables just work.