[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Разметка в три колонки
DmitryOpalev
Здравствуйте!
Сгенерировал страничку http://csstemplater.com/.
На три колонки с эмуляцией равной высоты этих колонок...
Сделал общий блок, а в нем уже все эти колонки (как там), поставил всем positiotn: relative; и float: как надо; но до меня не доходит, как сделать, чтобы высота у всех колонок была одинакова?



Спустя 6 минут, 17 секунд (28.11.2010 - 14:25) Slays написал(а):
фиксировано в пикселях, а если в процентах, то высота родительского блока должна быть фиксированной и строго заданной

Спустя 15 минут, 56 секунд (28.11.2010 - 14:41) DmitryOpalev написал(а):
Пожалуйста, посмотрите. Там про высоту вообще ничего не говорится (в CSS)...
А так я пытался делать...

Спустя 1 час, 29 минут, 47 секунд (28.11.2010 - 16:11) Slays написал(а):
кинь лучше сюда свой код, не хочу я в этом стремном конструкторе ковыряться =)

Спустя 10 минут, 27 секунд (28.11.2010 - 16:21) DmitryOpalev написал(а):
:)
html
<div id='middle'>

<div
id='left' class='colum'>
Слева
</div>

<div
id='center'>
По центру.
</div>

<div
id='right' class='colum'>
Справа.
</div>

</div>

CSS
div#middle {width: 100%;}
div#middle div#left {float: left;}
div#middle div#right {float: left;}
div#middle div.colum {width: 20%;}
div#middle div#center {display: block; width: 60%; float: left; display: block;}

Что нужно добавить?
P.S. я вырезал ненужный код, типа цвета, размера шрифта и т.п.

Спустя 50 минут, 41 секунда (28.11.2010 - 17:12) inpost написал(а):
под третьим дивом надо:
<div style="clear:both"></div>

Спустя 28 минут, 13 секунд (28.11.2010 - 17:40) Slays написал(а):
корявая верстка =)
Не знаю каким образом такой код мог выровнять колонки по высоте, везде id жесть, и чо за магия указывать display: block; два раза

по идее должно быть что-то типо:


<div class='main'>

<div
class='left'>
Слева
</div>

<div
class='center'>
По центру.
</div>

<div
class='right'>
Справа.
</div>

</div>



.main{
width:100%;
height:800px; // фиксированая строгая величина
}

.main div{
float:left;
height:100%; // 100% от родительского блока
}

.lefn, .right{
width:20%;
}
.center{
wudth:60%;
}


может чото пропустил


_____________
Курс валют
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.