Резиновый макет в три колонки

[AntonSolo]

Здравствуйте реально ли создать такой макет в три колонки (блочная вёрстка). В котором ширина первой и второй колонки будут фиксированые а третья колонка будет растягиваться на всю оставшуюся ширину экрана. высота будет растягиваться относительно самой высокой колонки. Фон у всех разный, причём первым двум колонкам он задаётся рисунками, так что вариант с бордерами не подходит. Заранее спасибо!

[DjTarik]

Здравствуйте реально ли создать такой макет в три колонки (блочная вёрстка). В котором ширина первой и второй колонки будут фиксированые а третья колонка будет растягиваться на всю оставшуюся ширину экрана. высота будет растягиваться относительно самой высокой колонки. Фон у всех разный, причём первым двум колонкам он задаётся рисунками, так что вариант с бордерами не подходит. Заранее спасибо!

Можно... Такая тема уже поднималась... Поищите на форуме...

[AntonSolo]

Ищу, что -то найти не могу

[gordi]

Ищу, что -то найти не могу

Вот здесь масса примеров на любой вкус, по листайте страницы блога:

http://trifler.ru/blog/

Поиск там тоже работает

Что б проще разобраться, страница, где собраны линки на примеры

http://trifler.ru/blog/ideal.html

[AntonSolo]

В этих примерах не работает ничего для IE и макеты в ширину не фиксированные(

Тоесть наоборот фиксированные!

[gordi]

В этих примерах не работает ничего для IE и макеты в ширину не фиксированные(

Тоесть наоборот фиксированные!

Во всех?

В не которых да, согласен, но не во всех, это точно

К тому же, по аналогии, ничего не мешает задать для IE6

width:expression

с нужными параметрами.

Edited January 11, 2009 by gordi

[AntonSolo]

Так оно и в 7 , не только в 6

<div id="middle" class="bordr bordl">

<div class="wrap">

<div class="main">

<div class="center">

<div class="content bordl">

<div style="border: 1px solid rgb(255, 0, 0); margin: 10px auto; padding: 5px 8px; width: 520px;">

Блок по ширине больше установленного

<span style="color: green;">min-width</span>

<br/>

При уменьшении окна браузера по горизонтали будет обрезан справа.

<br/>

<br/>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

Для IE6 Ширина макета фиксирована.

Для IE6 Ширина макета фиксирована.<br>

</div>

<p class="expand">

</p>

<p>Middle Center</p>

</div>

</div>

<div class="left">

<p class="expand">

</p>

<p>Middle Left</p>

</div>

<div class="right">

<p class="expand">

</p>

<p>Middle Right</p>

</div>

</div>

</div>

</div>

вот стили

#middle {

background:#000000 none repeat scroll 0 0;

}

#middle .center {

margin-left:-401px;

}

#middle .content {

background-color:yellow;

margin-left:401px;

}

#middle .left {

background:red;

width:200px;

}

#middle .right {

background:blue;

margin-left:-759px;

width:200px;

}

.wrap, .center, .content, .left, .right {

margin-bottom:-32767px;

padding-bottom:32767px;

}

.wrap, .center {

width:100%;

}

.wrap, .left {

float:left;

}

.center, .right {

float:right;

}

.content {

padding-top:9px;

}

.bord {

border:1px solid #000000;

}

.bordt {

border-top:1px solid #000000;

}

.bordr {

border-right:1px solid #000000;

}

.bordb {

border-bottom:1px solid #000000;

}

.bordl {

border-left:1px solid #000000;

}

#middle .right {

}

.clear {

clear:both;

display:block;

font-size:1px;

height:1px;

overflow:hidden;

}

p {

padding:5px 10px;

}

.expand a {

clear:both;

color:#996600;

display:block;

text-decoration:underline;

width:100px;

}

.expand a:hover {

color:green;

height:600px;

}

ну и нужно чтоб третяя колонка, которая мамая правая была резиновая

[gordi]

Так оно и в 7 , не только в 6

....

ну и нужно чтоб третяя колонка, которая мамая правая была резиновая

Скажите конкретно, какое расположение колонок вам нужно.

Дам конкретный линк

Просто напишите, какоq из макетов вам нужен:

left-content-right

content-right

left-content

content-left-right

left-right-content

Edited January 11, 2009 by gordi

[AntonSolo]

left-right-content

первые два фиксированые второй резиновый, занимает всё оставшееся пространство в зависимости от расширения

[gordi]

left-right-content

первые два фиксированые второй резиновый, занимает всё оставшееся пространство в зависимости от расширения

Прямая ссылка с той же страницы http://trifler.ru/blog/i/layouts/ideal/ideal_gordi_lrc.htm

Сделаете какой надо min/max-width тоже для IE6, удачи

Edited January 12, 2009 by gordi

[AntonSolo]

Спасибо всё работает, только теперь наткнулся на другую проблему в 6IE не могу прилепить футер!) ? Можно ли и с этим как то побороться для данного примера

[gordi]

Спасибо всё работает, только теперь наткнулся на другую проблему в 6IE не могу прилепить футер!) ? Можно ли и с этим как то побороться для данного примера

Посмотрите здесь: http://trifler.ru/blog/i/layouts/relative/..._border-top.htm

Вставив макет по той ссылке, что давал вам ранее,

а наименования классов полностью соотвествует,

вы получите то, что хотите.

Edited January 13, 2009 by gordi

[AntonSolo]

Спасибо всё зараьотало, теперь последняя проблема. Можно ли в блок left или right вставить еще по одному блоку, и чтобы эти бвставные блоки всегда находились внизу ???

[gordi]

Спасибо всё зараьотало, теперь последняя проблема. Можно ли в блок left или right вставить еще по одному блоку, и чтобы эти бвставные блоки всегда находились внизу ???

Прочитав внимательно - http://trifler.ru/blog/post_1221307338.html

и посмотрев примеры.

По аналогии можете попробовать, должно получиться.

[AntonSolo]

Проблема заключается наверно в том что нужно чтобы блоки внутри left и right всегда были внизу, а в тех примерах опускается вниз когда увеличивается конкретный блок.

[Victor Ananiev]

а что мешает сделать снизу блок типу футера и отрицательным маргином затащить его вниз, туда куда вам надо) потом прсто клиары повставлять)

[AntonSolo]

не понял)

[Victor Ananiev]

кароче под всей вашей конструкцией всунуть див) потом конструкции дать отрицательный маргин всей высоты дива) этим мы засунули див на низ конструкции(вышел футер) потом делим футер на три колонки так как поделили конструкцию, и потом у нас есть три футера, для каждой колонки)

[AntonSolo]

сейчас попробую! Спасибо

забфыл не получится у конструкции

margin-bottom:-32767px;

padding-bottom:32767px;

[Victor Ananiev]

почему это, а так?

margin-bottom:-32967px;

padding-bottom:32767px;