Влетело из головы(, подвал наезжает на контент

[cmndr_alexgreen]

Точно помню что год назад уже спрашивал похожее), а сейчас не вспомнить не получается не найти тот пост. 

 

Проблема довольно банальная, один блок наезжает на другой), возможно ранее я не размещал блоки в контенте "абсолютные" и поэтому работало. Подскажите что я забыл)).

<div id="page">	<header>		<h1 class="name">name</h1>	</header>	<nav>						<a href="index.html">Главная</a>						<a href="about.html">Услуги</a>						<a href="projects.html">Галерея</a>						<a href="contact.html">Контакты</a>	</nav>	<section class="content">		<div class="box abox"><a href="index.html">1</a></div>		<div class="box bbox"><a href="index.html">2</a></div>		<div class="box cbox"><a href="index.html">3</a></div>		<div class="box dbox"><a href="index.html">4</a></div>	</section>	<footer>footer	</footer></div>

html, body {    height: 100%;    margin: 0;   	padding:0;}body {    background: #fff url(../img/bg-page.png);}header, nav, section, footer {display: block;}#page {width: 1000px;margin: 0 auto;padding: 8px 0 0 0;}header {width: 1000px;height:180px;}nav {}section {position: relative;float: left;}footer {margin: 40px 0 100px 0;}.box {position:absolute;}.abox, .bbox, .cbox, .dbox {height:80px;z-index:2;font-family: 'Jura', sans-serif;}.abox2, .bbox2, .cbox2, .dbox2 {width:230px;z-index:-1;background:url(../img/bg-box.jpg);}.abox {top:0;left:160px;width:230px;background:#dbd700;}.bbox {top:120px;left:500px;width:220px;background:#aec066;}.cbox {top:540px;left:320px;width:260px;background:#5dc0cc;}.dbox {top:530px;left:715px;width:230px;background:#ce4718;}

Внутри <section>, на главной странице, будут располагаться блоки "box" с абсолютными параметрами, на остальных страницах простой контент. В данном варианте, подвал наезжает на section как только размещаешь блоки с абсолютными координатами.(( 

Edited April 1, 2014 by cmndr_alexgreen

[MichaelD]

Позиционировать абсолютно нужно относительно родительского элемента, а раз он у тебя 0px по высоте, вот и наезжает футер. 

 

section {float: left;} - если у тебя одна секция, зачем вообще прописывать float?

 

Вот в общем что-то похожее - http://jsfiddle.net/pjdLy/

[cmndr_alexgreen]

Позиционировать абсолютно нужно относительно родительского элемента, а раз он у тебя 0px по высоте, вот и наезжает футер. 

 

section {float: left;} - если у тебя одна секция, зачем вообще прописывать float?

 

Вот в общем что-то похожее - http://jsfiddle.net/pjdLy/

"0" то он тут, а на других страницах в нем будет обычный контент, в нормальном потоке. Можно конечно для заглавной страницы сделать свою секцию с фиксированным размером, а для других страниц с автоматическим размером по содержимому. 

 

Но если честно я думал есть способ и "абсолютные" блоки "обтягивать" контейнером.

Флоат там случайно)), на автомате скопировал из другого шаблона.

[MichaelD]

Абсолютное позиционирование выводит элемент из обычного потока элементов и он уже располагается относительно окна браузера.

То, что вы хотите возможно сделать либо задав высоту, либо какими-то костылями, которых я не знаю)

Можно с помощью флоатов расположить так элементы (ну если уж сильно хочется), соорудить что-то вроде сетки.

Edited April 1, 2014 by MichaelD