Роблячи черговий шаблон для Maxsite CMS, зіткнувся з цікавою ситуацією.

Оригінал-макет складався з 3 блоків, включаючи середній, обведений в рамку.

Все б нічого, але іноді обов'язково будуть виникати моменти, коли висота центральної частини через невеликої кількості контенту менше висоти сайдбарі. Така поведінка мені не подобалося, геометрія макета порушується:

Був потрібен спосіб, що відповідає принципу «висота центрального стовпчика повинна бути такою ж, як і у самого високого сайдбара». Побродивши по інтернету, переконався, що правило «все вже придумано до нас», стосовно до верстки теж працює. Сергій Чікуенок опублікував чудову статтю про колонки однакової висоти. У замітці «розбір польотів» вівся на прикладі двоколонковому макета, однак, за словами автора, нічого не заважає на основі представленої техніки зробити і три колонки.

Але перш ніж привести код і розібратися в деталях, невеликий відступ про механізм, що забезпечує потрібний результат.

Уявіть, є блок, якому визначено властивість float (відмінне від none), а всередині нього, наприклад, ще два плаваючих блокових елемента. Яка буде висота зовнішнього блоку? Все просто - він повністю вмістить в себе нашу парочку і його вертикальний розмір буде в точності дорівнює висоті одного з дочірніх елементів. Зрозуміло, ширина блоків не повинна бути забута.

У разі, коли властивість float контейнера не задано, такого ж ефекту можна домогтися, якщо вказати йому {overflow: hidden;} або відразу після внутрішніх блоків додати «чистильника» на кшталт <div style = "clear: both;"> </ div> .

Тепер варіація на задану тему.

HTML:

<Div class = "wrapper"> <div class = "wrap-in"> <div class = "page"> Lorem ipsum </ div> <div class = "sidebar-left"> Lorem ipsum </ div> <div class = "sidebar-right"> Lorem ipsum </ div> <div class = "clear"> </ div> </ div> </ div>

і CSS:

.wrapper {width: 90%; margin: 0 auto;} .wrap-in {width: 60%; margin: 0 auto; border: 1px solid black; background: # c0c0c0;} .page {float: left; width: 100%; margin-right: -100%;} .sidebar-left {position: relative; left: -34%; float: left; width: 33%; background: # 4682b4;} .sidebar-right {position: relative; left: 34%; float: right; width: 33%; background: # 82b346;} .clear {clear: both;}

Погляньте на готову конструкцію .

Рамковий контейнер .wrap-in завжди буде приймати висоту одного зі своїх нащадків, оскільки всі вони зроблені «плаваючими». Щоб бічні колонки не плуталися під ногами вони виведені за межі .wrap-in за допомогою відносного позиціонування. Негативне праве поле у ​​центральній сторінки .page дозволяє сайдбарі не помітити її ширини і підтягнутися максимально вгору. Додаткова обгортка .wrapper просто присутній, позначаючи межі в цілому. Її втрата суті не змінює; але не зовнішнього вигляду.

Проблем з посиланнями-якорями немає, контент в HTML-файлі йде першим, підтримка фіксованого або процентної ширини. Браузери: IE 6 +, Fx 3+, Safari 3+ (Win), Opera 9.6+, Google Chrome 2+, хоча щодо шостого навіть тут не можна бути впевненим. Осел, негідник, може підкласти свиню, коли її зовсім не чекаєш.

Завдання, озвучена на початку поста вирішена, але їжі для роздумів додалося. А чи не замахнутися вам на 3-стовпчик макет з «чесними» колонками рівної висоти?

Завантажити (css в зовнішньому файлі): 3-col-centr-border.zip 162