VPF::Трехколнный макет - Форум программистов

champion

Дата 17.4.2008, 08:55 (ссылка)

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

Загрузка ...

Опытный

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

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

Как сделать макет, который имеет левую колонку 230px и правую 230px, а центр имеет ширину в зависимости от ширины экрана. Левая обтекает цетр и правая соответственно. На слоях )

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Title</title>
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }
    #left, #center {
        float: left;
    }
    #left, #right {
        width: 230px;
    }
    #center {
        float: left;
        position: absolute;
        margin-left: 230px;
        margin-right: 230px;
    }
    #tr {
        margin-right: 230px;
        float: left;
    }
    #right {
        float: right;
    }
    </style>
</head>
    <body>
        <div id="tr">
           <div id="left">left</div>
         <div id="center">center</div>
     </div>
       <div id="right">right</div>
    </body>
</html>

Сделал такой код, но конечно же, в семействе ослиных все едет.

Это сообщение отредактировал(а) champion - 17.4.2008, 09:01

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

bars80080

Дата 17.4.2008, 09:21 (ссылка)

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

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

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

а почему в ряд не положить три дива, левую float: left, правую float: right, а центральную вообще не трогать?

и ещё вариант - абсолютное позиционирование для крайних колонок, прижать их к краям, а центру задать левый и правый маргин под колонки

ksnk

Дата 17.4.2008, 09:24 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

А погуглить рабочие пример получилось? Вот, к примеру

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

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