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?

HTML Code:
<div class="main">
<div class="content">Content area here</div>
<div class="sidebar">Sidebar content here</div>
</div>
Code:
.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;}