HTML+CSS+JavaScript

всех приветствую!

есть два дива.
внутри каждого из которых тоже по два дива, расположенные в ряд.
почему при разной высоте внутренних дивов первого внешнего дива внутренние дивы второго внешнего дива стараются занять оставшееся место в верхнем диве?

<div id="div1"> <div id="div11" style="width:50%;float:left;">содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 содержимое дива 1 1 </div> <div id="div12" style="width:50%;float:right;">содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 содержимое дива 1 2 </div> </div> <div id="div2"> <div id="div21" style="width:40%;float:left;">содержимое дива 2 1 содержимое дива 2 1 содержимое дива 2 1 содержимое дива 2 1 содержимое дива 2 1 содержимое дива 2 1 содержимое дива 2 1 </div> <div id="div22" style="width:60%;float:right;">содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 содержимое дива 2 2 </div> </div>

подскажите, как добиться того, чтобы внутренний див не выезжал за границы обрамляющего его дива (не задавая высоты обрамляющему диву)

ваши "обрамляющие дивы" ничего не "обрамляют"

задайте

<div id="div1" style="border: 1px solid red"> и <div id="div2" style="border: 1px solid blue">

и сами в этом убедитесь

в общем, вам надо разобраться с тем, как работает float
почитайте, например, http://habrahabr.ru/post/136588/ -- и обратите внимание там на фразу
"Блоки с float по умолчанию не влияют на высоту родителя, то есть если у вас есть некоторый
контейнер, а в нем находятся только плавающие блоки, то высота контейнера станет равна нулю. Пример как это выглядит." [в последней ссылке есть ТРИ решения]

понятно. большое спасибо.

Есть еще 4-е решение для блока с классом container:
display: inline-block;
width: 100%;

спасибо. возьму на заметку.

а еще вопрос - если задан размер по ширине внешнего дива, то вне зависимости от ширины внутренних элементов, отображалась бы только та их часть, которая укладывается в ширину внешнего div'а.

Тогда в стилях "внешнего" дива пишем: overflow: hidden;
Т.е. "все, что выходит за рамки - скрыть"

спасибо. нет, это немного не то, что нужно.