Засунуть один блок под другой

[Madmess]

Есть относительно стандартная блочная верстка

<div id="container"> - фиксированной ширины
  <div id="HEADER"></div>
  2 колонки - меню и основной текст страницы
</container>
<div id="FOOTER></div>

Первый вопрос - футер должен быть в блоке контейнера или после него идти? Или это в принципе все равно?
Плюс после закрытия контейнера у меня идет div со стилем
.clearfloat {
clear: both;
}
Важно ли ставить его после двух колонок и перед закрытием контейнера или ставить его после контейнера, т.е.
Первый вариант:

<div id="container"> - фиксированной ширины
<div id="HEADER"></div>
2 колонки - меню и основной текст страницы
<div class="clearfloat"></div>
</container>
<div id="FOOTER"></div>

Второй вариант:

<div id="container"> - фиксированной ширины
<div id="HEADER"></div>
2 колонки - меню и основной текст страницы
</container>
<div class="clearfloat"></div>
<div id="FOOTER></div>

Ну а теперь основной вопрос - футер у меня широкий и у него фоном стоит картинка, которую надо подсунуть под основной текст.
Т.е. надо блок футера поднять выше, чтобы он залез под основной блок.
Т.е. либо под блок container, если он футер идет после его закрытия.
Или под блок с тектом, если футер находится внутри блока container.
Смог приподнять блок футер этим, он налез на текст сверху, но я-index'ом я поставил его под текст.
position: relative;
bottom: -100px;
z-index: 1;

Но при этом возникает проблема, которую я никак не могу устранить.
После футера появляется пустое место.
Как его убрать?

На рисунке - в белой рамке - это футер, который засунулся под текст.
Салатовый прямоугольник - это то, что надо убрать.
Т.е. футер надо прижать к низу экрану.
Для просмотра ссылки Войди или Зарегистрируйся

Пробовал всякие варианты из статей типа - прижимаем футер к низу экрана - но это всё не то

 

[troop3r]

футер должен быть в блоке контейнера или после него идти? Или это в принципе все равно?

все равно.

Важно ли ставить его после двух колонок и перед закрытием контейнера или ставить его после контейнера, т.е.

лучше поставить этот блок после двух колонок.

После футера появляется пустое место.
Как его убрать?

bottom: -100px; - убираешь, потом добавляешь стили:

#container { position: relative; margin-bottom: -100px; z-index: 2; }
#footer { position: relative; z-index: 1; }

отступа внизу не будет.

 

[Madmess]

bottom: -100px; - убираешь, потом добавляешь стили:

#container { position: relative; margin-bottom: -100px; z-index: 2; }
#footer { position: relative; z-index: 1; }

отступа внизу не будет.

А это для какого случая?
Когда футер внутри контейнера или после него?

Добавлено через 11 минут
Есть футер идет после контейнера, то нормально отображается только в Opera 10.01 и Chrome

в IE 8 и Opera 9.24 - футер не заезжает под основной контент сайта, а контент футера поднят на 100px вверх от нижнего края футера

---------- Post added at 16:06 ---------- Previous post was at 14:53 ----------

Очень нужна помощь, готов кто-нибудь помочь в ICQ за небольшое вознаграждение?

 

[troop3r]

Когда футер внутри контейнера или после него?

после него.

Есть футер идет после контейнера, то нормально отображается только в Opera 10.01 и Chrome

убери clear: both;

в IE 8 и Opera 9.24 - футер не заезжает под основной контент сайта, а контент футера поднят на 100px вверх от нижнего края футера

приведи весь код и все стили, видимо у тебя полно ненужного шлака, что-то мешает.

 

[Madmess]

Сделал немного иначе.
Футер сделал узким - 75px и фон разрезал на 2 части
Одну часть засунул в футер, другую в контейнер
Все получилось, но есть одно НО!
Когда контента много - всё ок
А когда мало, футер не прижимается к низу экрана, а улезает вниз на 75px и появляется прокрутка. Хотя если делать без этого фона злополучного, то все нормально сним, прилипает к низу.

Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

 

[rafic]

Я не в курсе как кому, но мне читать подробное описания картинки сложнее чем посмотреть на саму картинку. Можно выложить схематическое изображение того, что тебе нужно? а мы уже скажем как лучше в виде кода изобразить потребованное...

 

[Madmess]

Пожалуйста

Вот примерный образец того что надо
Для просмотра ссылки Войди или Зарегистрируйся

Т.е. есть шапка, слева меню, справа контент, внизу футер.
Но футер высокий и он дожен быть под контентом.
Т.е. текст который идет в блоке контент налезает на футер.

 

[rafic]

<div class="footer"></div>
<div class="block">
здесь и хеадер и меню и контент и тд...
</div>

.footer{position:absolute; bottom:0;}
.block{position:absolute; top:0;}

точно не скажу, но по-моему так...

 

[omgnull]

Есть относительно стандартная блочная верстка

<div id="container"> - фиксированной ширины
<div id="HEADER"></div>
2 колонки - меню и основной текст страницы
<div class="clearfloat"></div>
</container>
<div id="FOOTER"></div>

Вообще интересный тег "container", не в этом ли касяк?)

<div id="container">
   <div id="header"></div>
   <div id="content">
      <div id="leftCloumn"></div>
      <div id="mainColumn"></div>
      <div class="clearFloat"></div>
   </div>
   <div id="footer"></div>
</div>

CSS:

#container{ width:100%; text-align:center } 
#header{ width:(нужная ширина); height:(нужная высота); text-align:left }
#content{ width:(нужная ширина); text-align:left }
#leftCloumn{ width:(нужная ширина); float:left }
#mainColumn{ width:(нужная ширина); float:left }
#footer{ width:(нужная ширина);  height:(нужная высота); text-align:left }
.clearFloat{ clear:both }