Срочно нужна помощь, по дивной верстке, проект горит! @ DeForum.ru

Сделал новый вариан дизайна TLT.ru, на дивах. Три колонки, левый и правый блоки спозиционированы абсолютно - это сделано для того, чтобы контент в коде шел первым, а все остальное внизу. Сответственно у пользователя загружается сначала центральный блок, а затем менюшки и футер.

CSS такой:

Код:

#head {
position: relative;
width: 100%;
overflow: hidden;
clear: both;
}
#main {
clear: both;
position: relative;
width: 100%;
overflow: hidden;
}
#content {
margin-left: 24%;
margin-right: 24%;
/*border-left: 1px dashed;
border-right: 1px dashed;*/
padding: 10px;
}
#leftcol {
position: absolute;
top: 0px;
left: 0px;
width: 24%;
}
#rightcol {
position: absolute;
top: 0px;
right: 0px;
width: 24%;
}
#footer {
margin: 10px;
padding: 10px;
color: #FFFFFF;
background-color: #003073;
}

HTML примерно такой:

Код:

<div id="head">Шапка</div>
<div id="main">
<div id="content">Основной контент, центральный блок</div>
</div>
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>
<div id="footer">Футер</div>

Вот главная страничка, все вроде бы здорово. Да не совсем. Я не заметил "маленькую" проблему моего макета - если текста в центральном блоке мало, то левая и правая колонка "обрезаются". Вот пример.

Люди помогите, мне сегодня уже боссу показать надо! Как это исправить, не отказываясь от абсолютного позиционирования? Контент герится автоматически, поэтому добивать пустое место br-ками не выход. SOS

6 Сообщения: 286 Зарегистрирован: 03.01.05

Добавь в #rightcol итд... overflow: auto;

overflow: auto;

With overflow: auto; With overflow: you can determine how overflowing content should be treated.
Values

visible = The element gets expanded to show the entire content.
hidden = The content will be cut if it overflows.
scroll = The browser should offer scroll bars.
auto = The browser should decide how to render the element. Scroll bars are allowed.

Older browsers do not know support this property.
IE does not support overflow:visible

оффтопик:

еще уголки скруклить у блоков и почти mail.ru получится... :)

Mn3m0NiC, пробовал уже, не помогает

bleep, ?

6 Сообщения: 286 Зарегистрирован: 03.01.05

Тёма,
Посмотрите здесь может и поможет чем http://intensivstation.ch/en/templates/

оффтопик:

Тёма, да просто больно уж оформление на mail.ru похоже, даже не просто похоже, а почти один в один

Mn3m0NiC, у макетов на ссылке проблема та же, там ее решают появлением при неоходимости еще одной прокрутки. Мне это не подойдет. Три прокрутки - это явно многовато =) Блиин что же делать

1 Сообщения: 59 Зарегистрирован: 25.08.05

если совсем срочно, то может попробовать сочетание: min-height: Xpx, height: auto; _height: Xpx;

ну как вариант...

czerny_angel, не понял :lamer:

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Тёма, сходите на http://xpoint.ru/ поищите там поиском в темах (а лучше их же плагином) и найдёте кучу примеров.

Акела, не нашел.

Всем спасибо... :tomato:

17 Сообщения: 7419 Зарегистрирован: 15.11.04

Тёма, плохо искали. По различным видам трёхколоночной вёрстки там дофига материалов. В том числе и по взаимозависимым высотам.

DeДверь
Логин:
Пароль:
	Автологин