DIV floated to right appears in center, while left float appears below
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).



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

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).


