VPF::DIV + 3 колонки + растяжка на 100% - Форум программистов

madkaban

Дата 11.4.2007, 19:24 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 31.3.2007

Репутация: нет
Всего: нет

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

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

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

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

Mymik

Дата 11.4.2007, 22:46 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

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

Код


<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>

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

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

madkaban

Дата 11.4.2007, 22:52 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 31.3.2007

Репутация: нет
Всего: нет

Цитата

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

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

Mymik

Дата 12.4.2007, 08:42 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1474
Регистрация: 12.5.2006
Где: Lamer-центер

Репутация: 7
Всего: 78

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>

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

--------------------

ICQ ::            857-857
E-mail ::         mymik[at]inbox[dot]ru
HomaPage ::  http://localhost/

:to_become_senile  :this

Uratsakidogi

Дата 14.4.2007, 21:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 118
Регистрация: 17.10.2006

Репутация: 11
Всего: 11

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

Код

.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>

Это сообщение отредактировал(а) Uratsakidogi - 14.4.2007, 21:34

--------------------

ЖЖ | ВерстаюНЕПОЗВОЛЯЙТЕ ЯЩЕРИКАМ, ОТРИЦАТЕЛЬНЫМ ИНОПЛАНЕТЯНИНАМ ОВЛАДЕВАТЬ ВАС, НЕ СТАНОВИТЕСЬ ИХ МАРИОНЕТКАМИ!

madkaban

Дата 19.4.2007, 17:59 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 27
Регистрация: 31.3.2007

Репутация: нет
Всего: нет

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »