How to prevent a floated sidebar from being bumped below main content?

HTML & CSS
1

I have a two column floated layout with a content area and a sidebar element. The content element and sidebar are sibling elements, both floated left with defined widths.

The problem I have is that when the content area has an image or video that’s wider than the defined width of the content area, the sidebar gets floated below the content area.

What would be the preferred css structure to prevent this?

<div class="main">
<div class="content">Content area here</div>
<div class="sidebar">Sidebar content here</div>
</div>

.main {margin:0 auto 0 auto; text-align:left; width:977px; padding:0;background:#fff;}
.content {float:left;width:631px; padding:0 20px; margin:0; min-height:475px; border-right:1px dotted #ccc;}
.sidebar {float:left; width:265px; min-height:475px; color:#777; padding:0 10px 5px 30px; border-left:1px dotted #ccc; margin:0 0 0 -1px;}
2

The easiest way to prevent this would be to add an overflow to the element that hides basically cuts off content exceeding the boundary of the element, see the below example.

[CODE=“CSS”].content {
overflow: hidden;
}