megafon4u.ru

Как известно, блоки являются совершенно независимыми элементами на HTML-странице и их свойства ни как не могут влиять друг на друга. В частности - высота одного блока ни каким образом не сможет повлиять на высоту соседнего блока. Совсем другая ситуация складывается при верстке таблицей. Тут высоты соседних ячеек в одной строке взаимозависимы и равны высоте самой высокой ячейки в этой самой строке. Это свойство очень удобно применять, когда нужно сделать фоновые колонки одинаковой высоты. Однако, этого же эффекта можно достичь используя только блоки. Причем этот способ не противоречит ни стандартам ни здравому смыслу. Сейчас я покажу как. Рассмотрим раскладку страницы float'ами.
HTML:

<div class="container">
	<div class="col1">
	    <p>Lorem ipsum dolar sit amet aut</p>
	</div>
	<div class="col2">
	    <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem</p>
	</div>
	<div class="col3">
	    <p>Lorem ipsum dolar</p>
	</div>
</div>

CSS:

.container {float:left;width:100%;background:green;}
.col1 {float:left;width:30%;background:orange;}
.col2 {float:left;width:40%;background:red;}
.col3 {float:left;width:30%;background:blue;}

Получим самую обычную страницу с колонками разной высоты. Можно посмотреть.
Теперь обратим внимание, что высота контейнера этих блоков при такой раскладке всегда будет равна высоте самого высокого блока. Воспользуемся этим свойством и сделаем следующее: обернем нашу раскладку в три контейнера и подкрасим их в разные цвета.

HTML:

<div class="container3">
    <div class="container2">
        <div class="container1">
            <div class="col1">
		     <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem voluptatem, enim error totam quae sunt voluptas ipsam vitae veritatis voluptas ipsam</p>
		 </div>
            <div class="col2">
		     <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem voluptatem</p>
		 </div>
            <div class="col3">
		     <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem voluptatem, enim error totam quae sunt voluptas ipsam vitae veritatis voluptas ipsam aspernatur aspernatur, quia sed architecto accusantium doloremque unde unde totam unde beatae aspernatur sit.</p>
		 </div>
        </div>
    </div>
</div>

После этого всем контейнерам зададим относительное позиционирование и будем их двигать влево на ширину, соответствующую ширине колонок. Ширина правой колонки равна 30%, соответственно .container2 сдвигаем на 30% - right:30%. Ширина средней колонки - 40%, соответственно .container1 двигаем на 40% - right:40%.
CSS:

.container2 {position:relative;right:30%;}
.container1 {position:relative;right:40%;}

Так как раскладка находилась в .container1, то она вместе с ним сдвинулась влево на 70%(30% + 40%). Сейчас нам нужно каждую колонку вернуть на свое место. Для этого, каждой дадим относительное позиционирование и двинем вправо на 70%.
CSS:

.col1 {position:relative;left:70%}
.col2 {position:relative;left:70%}
.col3 {position:relative;left:70%}

Полностью весь код:
CSS:

.container3 {float:left;width:100%;background:green;}
.container2 {float:left;width:100%;background:yellow;position:relative;right:30%;}
.container1 {float:left;width:100%;background:red;position:relative;right:40%;}
.col1 {float:left;width:30%;position:relative;left:70%}
.col2 {float:left;width:40%;position:relative;left:70%}
.col3 {float:left;width:30%;position:relative;left:70%}

HTML:

<div class="container3">
    <div class="container2">
        <div class="container1">
            <div class="col1">
		     <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem voluptatem, enim error totam quae sunt voluptas ipsam vitae veritatis voluptas ipsam</p>
		 </div>
            <div class="col2">
		     <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem voluptatem</p>
		 </div>
            <div class="col3">
		     <p>Lorem ipsum dolar sit amet aut dicta sit fugit voluptatem voluptatem, enim error totam quae sunt voluptas ipsam vitae veritatis voluptas ipsam aspernatur aspernatur, quia sed architecto accusantium doloremque unde unde totam unde beatae aspernatur sit.</p>
		 </div>
        </div>
    </div>
</div>

Мы получили трех-колоночный макет с колонками равной высоты. Он построен без таблиц и яваскрипта. Использовались, исключительно, приемы блочной верстки. С помощью данного способа можно построить
макет с любым количеством колонок. Проверить.