3 колонки на всю ширину страницы

ownercoder · April 30, 2009

Народ плиз хелп, не могу разобраться, есть к примеру код:

<!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" xml:lang="ru">
<head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
HTML, BODY {height: 100%; margin: 0; padding: 0; }
#topNContent {min-height: 220px; }
* HTML #topNContent {height: 220px; }
#content {padding-bottom: 30px; min-height: 100%; border: 1px solid #000; }
#top {background: #CCC; height: 220px; }
#bot {background: #CCC; height: 30px; margin-top: -30px; }
* HTML #bot {overflow: hidden; }
</style>
</head>

<body>

<div id="topNContent">
   <div id="top">шапка</div>
</div>
<div id="content">
	  контент
</div>
<div id="bot">подвал</div>

</body>
</html>

Все ок но вот маленькая проблема, как можно правильно растянуть блок #content

Что бы он не вылазил на всю ширину и + 220px? то есть растягивался от футера к ботому.

И еще вопрос, в уже растянутом диве ни как не могу растянуть предка на всю ширину.

К примеру, вставляю два дива внутрь (для трехколоночной верстки) #content и пытаюсь их растянуть, при указании height: 100% ни чего не происходит

Edited April 30, 2009 by ownercoder

lancer · May 6, 2009

Покажите графически, что вы хотите реализовать.

Из объяснений почти ничего не понял.

psywalker · May 10, 2009

ownercoder

Держи дружище: тут смысл походу именно тот, который ты ищешь, только переделай всякие высоту и ширину под себя :rolleyes:

http://trifler.ru/blog/i/layouts/relative/...flow_hidden.htm

А вот тут есть 5 разных вариантов, выбирай, какой больше нравится: http://trifler.ru/blog/relative.html

Edited May 10, 2009 by psywalker

Sign In

3 колонки на всю ширину страницы

Question

ownercoder

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

lancer

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information