Need help: трехколоночная DIVная верстка.

12
И
На сайте с 12.05.2008
Offline
8
3116

Никак не могу разобраться, как сделать три колонки на дивах, чтобы они снизу выравнивались по одной линии, т.е. если левая наполнена, правая и средняя нет, они все выравниваются снизу по foot'у. В прикрепленном файле есть пример, где все как надо, только с ним ни как не могу разобраться - куча: container, sub_container, wrapper.... , а за счет чего достигается такой эффект никак не вкурю. Объясните или ссыль подкиньте а.

zip 3_column_css_layout_right_sidebars.zip
R
На сайте с 02.10.2007
Offline
16
#1

Пользуйтесь. Очень полезный сайт.

Никогда не говори никогда (http://suhih.ru)
И
На сайте с 12.05.2008
Offline
8
#2

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

jan308
На сайте с 29.04.2008
Offline
16
#3

e-petrov.ru/test/three-column/

webmascon.com/topics/coding/13a.asp

может это поможет

И
На сайте с 12.05.2008
Offline
8
#4

Почитаем, спасибо.

Вот в нагрузку вопросик, мучает меня: во всех примерах ДИВной верстки где дивы флотятся, зачем-то делают перестановку типо margin-left: -200px; вот никак не пойму зачем это, демонстрация возможностей или для чего?

Ufaweb
На сайте с 03.03.2008
Offline
182
#5

Не знай, я делаю для левых 2 колонок float:left, для первой - ширину width:200px, для правой - только ширину. После колонок <div style="clear:both"></div>.

И
На сайте с 12.05.2008
Offline
8
#6

Ufaweb, а мож поподробней. "После колонок <div style="clear:both"></div>" - зачем?

[
На сайте с 27.06.2008
Offline
0
#7

Чтобы отменить обтекание элемента. Иначе следующий элемент будет "липнуть" к нему справа . Можно использовать <div style="clear: left"></div>.

Имя:
Вложения
Тип файла: zip 3_column_css_layout_right_sidebars.zip (2.2 Кб, 1 просмотров)

посмотрел пример, он не кроссбраузерный. Не работает в FF и Opera , я советую Вам его не использовать.

К
На сайте с 07.07.2007
Offline
21
#8
Имя:
Почитаем, спасибо.
Вот в нагрузку вопросик, мучает меня: во всех примерах ДИВной верстки где дивы флотятся, зачем-то делают перестановку типо margin-left: -200px; вот никак не пойму зачем это, демонстрация возможностей или для чего?

Обычно это делается, чтобы правая колонка не съезжала вниз в IE: как тут, например.

И
На сайте с 12.05.2008
Offline
8
#9

Подскажите почему #container отображается бесцветным в опере, в ИЕ все в поряде.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>5</title>

<style>

<!--

body {

padding:0px;

width: 900px;

margin: 20px auto;

margin-right: auto;

min-height:100%;

position: relative;

text-align: center;

}

#container {

background: #FFC0CB;

width: 900px;

}

#left {

float: left;

width: 200px;

}

#sub_cont {

background: #87CEFA;

float: right;

width: 700px;

}

#center {

background: #90EE90;

float: left;

width: 500px;

}

#right {

float: right;

width: 200px;

}

#foot {

background: #FFF48C;

clear: both;

height: 40px;

width: 900px;

}

-->

</style>

</head>

<body>

<div id="container">

<div id="left">5</div>

<div id="sub_cont">

<div id="center">4<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</div>

<div id="right">3</div>

</div>

</div>

<div id="foot"></div>

</body>

</html>

Без:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

нормальное отображение, но куча других глюков.

Ткач
На сайте с 29.04.2007
Offline
95
#10

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

Если нужно чтобы просто бэкграунд был распределен до самого низу, то это другое.

Разработка и создание сайтов. Красиво, функционально, недорого. (http://time-online.ru/) ICQ 388-474-890)
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий