두 개의 떠 다니는 div 옆에 부동 div가 있습니다.

Question

두 개의 div가있는 컨테이너가 있습니다 (볼 수있는 노란색 배경 전환). 그 두 개 아래에 세 번째 플로트 (붉은 색)를 추가하고 싶었지만 모든 컨테이너를 통해 뻗어있었습니다. 어떤 아이디어?

JSFIDDLE : http://jsfiddle.net/RrQff/2/

HTML

<center> 
<div id='container'> 
    <div class="big"></div> 
    <div class="big"></div> 
    <div id='extra'>abc<div>  
<div> 
</center> 

CSS

#container { 

    height:400px; 
    width:400px; 
    background-color:gray; 
} 

.big { 
    height:350px; 
    /* background-color:yellow;*/ 
} 

#container > div:first-child {border-right:1px solid black;} 

#container > div { 
width:199px; 
float:left; 

} 

#extra { 

    background-color:red; 
    width:80% !important; 
    float:none !important; 
    margin-top:20px; 
} 

Answer 1

지금처럼, 당신의 #extra 사업부의 CSS에 clear: both;을 추가

#extra { 
    background-color:red; 
    width:80% !important; 
    float:none !important; 
    margin-top:20px; 
    clear: both; 
} 

Answer 2

추가 CSS 지우기 :

#extra { 
    clear: both; 
    background-color:red; 
    width:80% !important; 
    float:none !important; 
    margin-top:20px; 
} 

이 시도 : http://jsfiddle.net/RrQff/5/

Answer 3

더 좋은 sollution 디스플레이를 사용하는 것입니다 : 3 명 div를하거나 인라인 블록을 :

를

> #container{ position: relative;} 
> #container .big:first {position: absolute; top: ... left: ...} 
> #container div+div { top: ..left } $container #extra { position: absolute; right: 0; top: 0} } 

Answer 4

div를 지워야합니다. 이 일을보십시오 :

<center> 
<div id='container'> 
    <div class="big">div one (floated)</div> 
    <div class="big">div two (floated)</div> 
    <div class="clear" style="clear:both" /> 
    <div id='extra'>third div (which i want below floated ones)<div>   
<div> 
</center> 

명확한 삽입 : 두 아래 두 사업부 당신은``

를 사용해서는 안 div의