Выравнивание Div бок о бок с переполнением

Question

Я хочу выровнять эти два элемента div с поплавком: слева бок о бок. если я добавлю «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-код неверен, идентификаторы должны быть уникальными, и у вас есть два #box.

Answer 2

Рабочий раствор:

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

Изменения: я удалил поплавок из ваших внутренних элементов, потому что это то, что действительно вызывает проблему, а не переполнения. Кроме того, вы не можете иметь два элемента на странице с то же id! Так что я сделал один 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;  
}