Как прибить футер?

[Ururu]

Стандартные способы не подходят.

Вот такая страника...

<div id="container"> 
	<div id="header"></div>
	<div id="content"></div>
	<div id="footer"></div>
</div>

Блоки находятся в контейнере.

Если попробовать так:

position: absolute;
bottom: 0;

То футер прижмется. Но возникает другая проблема (с высотой блоков):

header = 50px

content = все место между хедером и футером

footer = 31px

Хедер наверху, за ним по умолчанию идет блок с контентом, внизу прибит футер (который позиционирован абсолютно - внизу, относительно страницы).

Так вот как теперь объяснить блоку content, что нужно растянутся от и до??? Указываю в стилях высоту в 100%, результата нет, реагирует только на px.

Может стоит просто по порядку указать div-ы без контейнера и позиционировать их все абсолютно (используя margin, что бы избежать нахлеста)?

[s0rr0w]

У абсолютно-спозиционированных элементов есть одно маленькое западло. Они не формируют контента и, соответственно, все что за пределами страницы уйдет в никуда.

[BassEast]

ищите.. здесь была бурная тема по этому поводу.

ну к примеру:

http://forum.htmlbook.ru/index.php?showtop...amp;#entry63049

Edited April 6, 2009 by BassEast

[Searcher]

Вариантов много. Если контент не должен удлиннять блок и высота заголовка и подвала = 100px, то:

#content {
position:absolute;
overflow:auto;
top:100px;
right:0;
bottom:100px;
left:0;
}

IE6 и меньше не понимают одновременного указания позиции противоположных сторон, для него можно так скорректировать:

#content {
top:100px;
left:0;
width:100%;
height: expression(parentNode.offsetHeight - 200 + 'px');
}

в такой ситуации #container не нужен

да, и для того чтобы абсолютно позиционированный блок позиционировался относительно родительского элемента, а не окна, у родителя должно быть position:relative или absolute;

[Ururu]

Вот что я хочу сделать:

http://i599.photobucket.com/albums/tt72/Ub...pg?t=1239161359

А это сам код, что и как расположил:

<!--Лого-->
		<div id="header1"></div>
<!--Хедер-->
		<div id="header2">
<!--Поисковик-->
			<div id="search" class="column">поиск</div>
<!--Топ меню-->
			<div id="topmenu" class="column">кнопки</div>
		</div>
<!--Центральный контейнер-->
		<div id="container">
<!--Левое меню-->
			<div id="left" class="column">меню</div>
<!--Контент-->
			<div id="center" class="column">контент</div>
<!--Правое меню-->
			<div id="right" class="column">меню2</div>
		</div>
<!--Футер-->
		<div id="footer">
<!--Копирайт-->
			<div id="copyright " class="column">копирайт</div>
<!--Счетчики-->
			<div id="countermenu" class="column"></div>
		</div>
		</div>

То футор фисит посередине, то вообще все слои перемешиваются и идут не по порядку.

Edited April 8, 2009 by Ururu

[Searcher]

Разные варианты компоновки:

http://blog.html.it/layoutgala/

http://layouts.ironmyers.com/

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

http://tjkdesign.com/articles/one_html_mar...css_layouts.asp

Изучите и поймете общий принцип, тогда сможете сами сделать какую захотите.

А тут как прибить футер к низу:

http://www.zakharov.ms/footer/