오른쪽으로 부풀린 DIV가 중앙에 나타나고 왼쪽 플로트가 아래에 나타납니다

Question

960 픽셀의 폭을 가진 메인 콘텐츠 DIV와 내부에 두 개의 플로팅 된 DIV 요소가 있습니다.

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

그리고 CSS : 여기의 단순화 된 버전입니다

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

사업부의 #main_data은 #content 내에서 중심을 보이며 #sidebar이 떠 왼쪽으로 표시되지만 #main_data 아래. #content에 여백 또는 패딩이 정의되어 있지 않으며 #sidebar에 4px 패딩을 포함해도 float의 너비는 960px를 초과하지 않습니다.

Firefox, IE8, Chrome, Safari 및 Opera에서는 괜찮 았지만 IE7 및 IE6에서는 문제가 없습니다.

DOM의 위치를 ​​바꾸면 제대로 표시됩니다. #main_data에 더 관련성있는 정보를 문서의 가장 가까운쪽에 가깝게두면이 사이트를 더 많은 SEO 액세스 가능 사이트로 만들려고합니다. (Wikipedia 왼쪽 사이드 바가 소스에서 나중에 나오는 것과 같은 일을합니다). ,

Answer 1

나는 "당신이 그렇게 먼저 더 명확 있는지 확인해야한다 뭘 하려는지 확실히 모르겠어요,하지만 난 당신의 누락은 <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

흥미로 명확한 요소입니다 어떻게 생각 나는 당신의 코드를 정확하게 복사하고, "... data ..."대신에 root html 태그와 Lorem Ipsum 텍스트를 추가하여 IE7에서는 기대했던 것과 정확히 반대되는 결과를 보았습니다 : FF 3.5에서는 그렇지 않았지만, FF 3.5에서는 그렇지 못했습니다 :

저를위한 솔루션은 모든 브라우저에서 레이아웃이 적절 해 보일 때까지 두 하위 div의 여백 및 패딩으로 재생하는 것이 었습니다. 특히, 사이드 바 패딩을 3px로 낮추었습니다. 그리고 명시 적으로 다른 두 div의 여백을 0px로 설정하십시오. 그러나 나의 초기 결과가 당신과 반대되는 것을 감안할 때, 나는 이것이 당신뿐만 아니라 다른 것일 수도 있다고 생각합니다.