DIV floated to right appears in center, while left float appears below

Question

I have a main content DIV with a width of 960px, and two floated DIV elements inside. Here's a simplified version of it:

<div id='content'>
    <div id='main_data'>
       ....Data....
    </div>
    <div id='sidebar'>
       ....data....
    </div>
</div>

And the CSS:

div#content { width: 960px; position: relative }
div#main_data { float: right; width: 755px; }
div#sidebar { float: left; width: 190px; padding: 4px }

The DIV #main_data appears to be centered within #content and #sidebar appears floated left, but below #main_data. #content does not have defined margins or padding, and even including the 4px padding in #sidebar, the widths of the floats do not surpass 960px.

This appears fine in Firefox, IE8, Chrome, Safari and Opera - but not in IE7 and IE6.

I should add that if I switch the position in the DOM, they appear correctly - I'm attempting to make this site more SEO accessible by putting the more pertinent information in #main_data closer to the top of the document (Wikipedia does the same thing where the left sidebar comes later in the source).

Answer 1

I"m not quite sure what you are trying to do so first you should make that more clear, but I think what your missing is a clear element such as <br style="clear:both;/'>

 <div id='content'>
   <div id='main_data'>
      ....Data....
   </div>
   <div id='sidebar'>
      ....data....
   </div>
   <br style='clear:both;'/>
</div>


#content { width: 960px; }
#main_data { float: right; width: 755px; }
#sidebar { float: left; width: 190px; padding: 4px }

Answer 2

Interesting, I copied your code exactly, added root html tags and some Lorem Ipsum text in place of "...data...", and saw exactly the opposite result: expected behavior in IE7, but not in FF 3.5.

The solution for me was to play around with the margins and paddings of both child divs until the layout looked proper in all browsers. Specifically, I lowered the sidebar padding to 3px, and explicitly set the margins of the other two divs to 0px. But given that my initial results were the opposite of yours, I would guess this may be differenct for you as well.