Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > DIV + 3 колонки + растяжка на 100%

Автор: madkaban 11.4.2007, 19:24

День добрый!
Подскажите, как сделать 3 колонки в DIV и еще растяжку?
Всего есть левая, центральная и правая колонка...
Нужно, чтобы левая и правая колонки были с фиксированными размерами,
а центральная, чтобы тянулась ( width = "auto" ).

Я это смог реализовать, когда центральная колонка фиксированная...
Но тут нужна растяжка.

Заранее благодарен за ответы.

Если можно пример. smile

Автор: Mymik 11.4.2007, 22:46

Примерно вот так вот -->>

Код


<html>
<head></head>
<body>
    <div style="float:left; background:green; width:200px; height:100px"></div>
    <div style="float:right; background:green; width:200px; height:100px;"></div>
    <div style="background:blue;">aa asljdf asdkfasdhk jasfk bajks abjfs bkdsj fbjaskd bfakjs bkajsd bslfdj fl blasdfjbasjfsak sfgjknldkf gjnlsdkgsnlkngslk nril gsen lrgilnsf lgseirl glie </div>
</body>
</html>

Т.е. сначала ты боковые элементы определяешь, а после этого уже центр описываешь. Может быть не столь логично. Но зато работает.

Автор: madkaban 11.4.2007, 22:52

Цитата

Может быть не столь логично. Но зато работает.

спасибо. действительно не логично - сам никогда не догадался бы! smile

Автор: Mymik 12.4.2007, 08:42

madkaban, вчера забыл дописать, а сегодня вспомнил.
В чентральную ячейку надо добавить отступы размером с боковые столбцы. (т.е. margin-left:200px; margin-right:200px;)

Код


<html>
<head></head>
<body>
    <div style="float:left; background:green; width:200px; height:100px"></div>
    <div style="float:right; background:green; width:200px; height:100px;"></div>
    <div style="background:blue;margin-left:200px; margin-right:200px;">aa asljdf asdkfasdhk jasfk bajks abjfs bkdsj fbjaskd bfakjs bkajsd bslfdj fl blasdfjbasjfsak sfgjknldkf gjnlsdkgsnlkngslk nril gsen lrgilnsf lgseirl glie </div>
</body>
</html>

Тогда если центральная ячейка будет по высоте больше чем боковые она не будет залезать под их пространство.

Автор: Uratsakidogi 14.4.2007, 21:33

Другой вариант:

Код

.container{ float: left; width: 100%; }
#content{ margin: 0 258px 0 222px; }
#left{ float: left; width: 210px; margin-left: -100%; padding-right: 12px; }
#right{ float: left; width: 250px; margin-left: -258px; padding-left: 8px; }

Код

<div class="container">
<div id="content">Середина</div>
</div>
<div id="left">Лево</div>
<div id="right">Право</div>

Автор: madkaban 19.4.2007, 17:59

спасибо оба варианта работают