Как сделать трехколоночную резиновую верстку с футером?

**archerl** · 15.09.2013 13:40

Помогите, пожалуйста. Как сделать трехколоночную резиновую верстку с футером, где все 3 колонки растягиваются и во всех колонках внутри можно вставлять "<div style="clear: both;"></div>"? Заранее спасибо!

Пробовал код, но там "<div style="clear: both;"></div>" все убивает. Пробовал на основе абсолютного позиционирования (http://htmlbook.ru/samlayout/tipovye...onochnyi-maket), но там не знаю как сделать футер после всех колонок...

Код HTML:

<!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" lang="ru" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-utf-8" /> <style type="text/css">
		*{padding:0;margin:0;}
		html,body{height:100%;}
		body{background:#fff;color:#000;font:12px Tahoma, Helvetica, Arial, Verdana;}
		a{color:blue;font:12px Tahoma, Helvetica, Arial, Verdana;text-decoration:underline;}
		a:hover{text-decoration:none;}
		.wrap{position:relative;min-height:100%;height:auto !important;height:100%;}
		.clear{clear:both;height:0;padding:0;margin:0;overflow:hidden;}
		.empty{height:100px;}
		.footer{position:relative;height:100px;margin-top:-100px;background:#ddd}

		/*  other styles   */
		.header,.footer,.sidebar-left,.sidebar-right,.content{font-size:24px;text-transform:uppercase;background:#eee;line-height:100px;}
		.header{height:100px;padding:0 30px;}
		.sidebar-left,.sidebar-right{width:20%;background:#ccc;}
		.sidebar-left{float:left;}
		.sidebar-right{float:right;}
		.content{margin:0 20%;background:#fafafa;}
	</style> </head> <body> <div class="wrap"> <div class="header">
		Шапка
	</div> <div class="sidebar-left">
		Левая колонка
    <br /><br /><br />
    sdfsdf
	</div> <div class="sidebar-right">
		Правая колонка
    <br /><br /><br />
    sdfsdfsdf
	</div> <div class="content">
		Центральная колонка

    <div style="clear: both;"></div>
    sdfsdfdfgdfg
    dfgdfgdfg
	</div> <div class="clear"></div> <div class="empty"><!-- --></div> </div> <div class="footer">
	Футер
</div> </body> </html>

**~~ramazanaman~~** · 15.09.2013 14:03

Выберите какой нужен тут, и далее меняйте.

**archerl** · 15.09.2013 14:15

ramazanaman, Выбрал http://blog.html.it/layoutgala/LayoutGala01.html, но нельзя использовать <div style="clear: both;"></div> в центральной колонке, а у меня такие конструкции в контенте используются

.

**NightHawk** · 15.09.2013 14:44

archerl, Вы уверены? Вставил в центральную колонку id="content", вся конструкция сохранилась. Проверьте ещё раз.

**~~ramazanaman~~** · 15.09.2013 14:47

Не понял как у вас боз используется в контенте? Он создан для заполнения пустого места и правильного отображения блоков.

Попробуйте на основе того макета начать делать, или же создайте <div style="clear: both;"> через классы.

**archerl** · 15.09.2013 14:56

ramazanaman, У меня сайт фиксированной верстки, хочу сделать резиновую, но в контенте есть элементы со свойством clear: both; (через классы), они ломают верстку. Можно ли этого избежать?

---------- Сообщение добавлено 11:56 ---------- Предыдущее 11:54 ----------

NightHawk, Если вставить в центральную колонку id="content" <div style="clear: both;"></div> и потом текст написать текст, то он съедет из этой колонки

**~~ramazanaman~~** · 15.09.2013 15:02

<div style="clear: both;"></div> ставится после контента, а не до. Смысла в том что он до контента стоит?

Для того чтобы сделать резиновую просто width сделайте 100%. Если есть таблицы, то будет немного косячить, у них надо будет урезать width и все.

**archerl** · 15.09.2013 15:08

ramazanaman, <div style="clear: both;"></div> используется в верстке внутри контента (так надо).

**NightHawk** · 15.09.2013 17:17

archerl, Я ведь говорю, что все проверил, он отменяет обтекания текста, и текст продолжается с новой строки, но в этом блоке!, за блок не выезжает никоем образом.

p.s. вы просто смотрите на своем коде, а я говорю про _http://blog.html.it/layoutgala/layoutgala01.html вставте в контект и посмотрите что все нормально и сделайте свой код также

**mmkulikov** · 15.09.2013 23:52

Сообщение от archerl

У меня была похожая проблема - помогло вместо both в центральной колонке использовать right

	15.09.2013 13:40 #1
archerl Опытный Регистрация: 02.10.2011 Сообщений: 469 Записей в дневнике: 1 Репутация: 26 Webmoney BL: ?	Помогите, пожалуйста. Как сделать трехколоночную резиновую верстку с футером, где все 3 колонки растягиваются и во всех колонках внутри можно вставлять "<div style="clear: both;"></div>"? Заранее спасибо! Пробовал код, но там "<div style="clear: both;"></div>" все убивает. Пробовал на основе абсолютного позиционирования (http://htmlbook.ru/samlayout/tipovye...onochnyi-maket), но там не знаю как сделать футер после всех колонок... Код HTML: <!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" lang="ru" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-utf-8" /> <style type="text/css"> {padding:0;margin:0;} html,body{height:100%;} body{background:#fff;color:#000;font:12px Tahoma, Helvetica, Arial, Verdana;} a{color:blue;font:12px Tahoma, Helvetica, Arial, Verdana;text-decoration:underline;} a:hover{text-decoration:none;} .wrap{position:relative;min-height:100%;height:auto !important;height:100%;} .clear{clear:both;height:0;padding:0;margin:0;overflow:hidden;} .empty{height:100px;} .footer{position:relative;height:100px;margin-top:-100px;background:#ddd} / other styles / .header,.footer,.sidebar-left,.sidebar-right,.content{font-size:24px;text-transform:uppercase;background:#eee;line-height:100px;} .header{height:100px;padding:0 30px;} .sidebar-left,.sidebar-right{width:20%;background:#ccc;} .sidebar-left{float:left;} .sidebar-right{float:right;} .content{margin:0 20%;background:#fafafa;} </style> </head> <body> <div class="wrap"> <div class="header"> Шапка </div> <div class="sidebar-left"> Левая колонка <br /><br /><br /> sdfsdf </div> <div class="sidebar-right"> Правая колонка <br /><br /><br /> sdfsdfsdf </div> <div class="content"> Центральная колонка <div style="clear: both;"></div> sdfsdfdfgdfg dfgdfgdfg </div> <div class="clear"></div> <div class="empty"><!-- -->*</div> </div> <div class="footer"> Футер </div> </body> </html> http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
0 archerl

	15.09.2013 14:03 #2
~~ramazanaman~~ Banned Регистрация: 14.10.2011 Сообщений: 586 Репутация: 77	Выберите какой нужен тут, и далее меняйте.
0 ramazanaman

	15.09.2013 14:15 #3
archerl Опытный Регистрация: 02.10.2011 Сообщений: 469 Записей в дневнике: 1 Репутация: 26 Webmoney BL: ?	ramazanaman, Выбрал http://blog.html.it/layoutgala/LayoutGala01.html, но нельзя использовать <div style="clear: both;"></div> в центральной колонке, а у меня такие конструкции в контенте используются . http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
0 archerl

	15.09.2013 14:44 #4
NightHawk Опытный Регистрация: 13.08.2011 Сообщений: 460 Репутация: 152	archerl, Вы уверены? Вставил в центральную колонку id="content", вся конструкция сохранилась. Проверьте ещё раз. Юзаю этот хостинг с приятными ценами
0 NightHawk

	15.09.2013 14:47 #5
~~ramazanaman~~ Banned Регистрация: 14.10.2011 Сообщений: 586 Репутация: 77	Не понял как у вас боз используется в контенте? Он создан для заполнения пустого места и правильного отображения блоков. Попробуйте на основе того макета начать делать, или же создайте <div style="clear: both;"> через классы.
0 ramazanaman

Как сделать трехколоночную резиновую верстку с футером?

Опции темы

Спасибо сказали:

Тэги топика:

Похожие темы

HTML/CSS Вёрстку макетов

Выполню HTML/CSS вёрстку

Выполню HTML/CSS вёрстку

Верстку на WordPress

Проверьте, пожалуйста, верстку

Тем:

Сообщений:

Пользователей:

Сейчас на сайте:

Вход

Сайт

Разделы

Прочее

Следите за нами

Витрина ссылок

У нас проходит

У кого попросить инвайт?

Золотые темы форума

Последние новости

Популярные темы

Информеры

	15.09.2013 14:56 #6
archerl Опытный Регистрация: 02.10.2011 Сообщений: 469 Записей в дневнике: 1 Репутация: 26 Webmoney BL: ?	ramazanaman, У меня сайт фиксированной верстки, хочу сделать резиновую, но в контенте есть элементы со свойством clear: both; (через классы), они ломают верстку. Можно ли этого избежать? ---------- Сообщение добавлено 11:56 ---------- Предыдущее 11:54 ---------- NightHawk, Если вставить в центральную колонку id="content" <div style="clear: both;"></div> и потом текст написать текст, то он съедет из этой колонки http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
0 archerl

	15.09.2013 15:02 #7
~~ramazanaman~~ Banned Регистрация: 14.10.2011 Сообщений: 586 Репутация: 77	<div style="clear: both;"></div> ставится после контента, а не до. Смысла в том что он до контента стоит? Для того чтобы сделать резиновую просто width сделайте 100%. Если есть таблицы, то будет немного косячить, у них надо будет урезать width и все.
0 ramazanaman

	15.09.2013 15:08 #8
archerl Опытный Регистрация: 02.10.2011 Сообщений: 469 Записей в дневнике: 1 Репутация: 26 Webmoney BL: ?	ramazanaman, <div style="clear: both;"></div> используется в верстке внутри контента (так надо). http://seogram.ru - Продвижение сайтов с оплатой только за потенциальных клиентов.
0 archerl

	15.09.2013 23:52 #10
mmkulikov Студент Регистрация: 23.02.2013 Сообщений: 64 Репутация: 5 Webmoney BL: ?	Сообщение от archerl <div style="clear: both;"></div> У меня была похожая проблема - помогло вместо both в центральной колонке использовать right
0 mmkulikov

Темы	Раздел	Ответов	Последний пост
HTML/CSS Вёрстку макетов	Создание сайтов	2	26.02.2013 02:15
Выполню HTML/CSS вёрстку	Создание сайтов	6	05.12.2012 12:33
Выполню HTML/CSS вёрстку	Web программирование	1	26.11.2012 18:57
Верстку на WordPress	Другая работа	2	19.11.2011 20:05
Проверьте, пожалуйста, верстку	Оценка ваших сайтов, блогов	5	04.06.2011 00:11