Div 정렬 나란히 오버플로

Question

나는이 두 div 요소를 왼쪽으로 나란히 float로 정렬하려고합니다. "overflow : hidden"을 추가하면 작동하지 않습니다. 하지만이 "오버플로"특성을 제거 할 수 없습니다.

어떤 해결책이 있습니까?

CSS :

#box{ 
    width:100%; 
    overflow:hidden; 
    clear:both; 
} 

#el1 { 
    width:49%; 
    background-color:yellow; 
    height:100px; 
    float:left; 
} 
#el2 { 
    width:49%; 
    background-color:blue; 
    height:100px; 
    float:left; 
} 

HTML : 사전에

<div id="box"> 
    <div id="el1"></div> 
</div> 

<div id="box"> 
    <div id="el2"></div> 
</div> 

FIDDLE

감사합니다.

Answer 1

이 CSS는 내가 생각하기에 당신이 찾고있는 것입니다.

#box{ 
    width:50%; 
    overflow:hidden; 
    float: left; 
} 

#el1 { 
    background-color:yellow; 
    height:100px; 
} 
#el2 { 
    background-color:blue; 
    height:100px; 
} 

그런데 HTML이 잘못되어 고유 ID가 있어야하며 두 개의 #box가 있어야합니다.

Answer 2

근무 솔루션 :

http://jsfiddle.net/Ar99F/280/

변경 : 그건 정말 문제가 아닌 오버 플로우를 일으키는 것입니다 때문에 나는, 당신의 내면의 요소에서 플로트를 제거했습니다. 또한 페이지에 두 개의 요소가있을 수 없습니다. 은입니다. 그래서 하나 box1 다른 box2

#box{ 
    width: 50%; 
    overflow:hidden; 
    float: left; 
} 
#box2{ 
    width:50%; 
    float: left; 
    overflow:hidden;   
} 

#el1 { 
    width: 100%; 
    background-color: yellow; 
    height: 100px; 
} 
#el2 { 
    width: 100%; 
    background-color: blue; 
    height: 100px;  
}