Div обертка контента

[berg12]

Добрый вечер.

Опыта создания шаблонов с ноля у меня нет, по этому возникла проблема.

Суть проблемы:

<div id="контейнер">

2 колонки с содержанием(div)

</div>

стили

#content {

float: left;

margin-top: 170px;

padding-left: 3px;

width: 673px;

}

#kolonka {

float: left;

margin-top: 170px;

width: 200;

}

#container {

margin: auto;

width: 980px;

background: white;

border: 2px solid #E7E7E7;

}

html

<div id="container">

<div id="content" ></div>

<div id="kolonka"></div>

</div>

<div id="footer"></div>

Контейнер имеет белый фон и рамку, но почему-то получается, что эти колонки не находятся внутри div(контейнер),так же возникает проблема с футером, который находится внизу.

Что самое интересное, взаимопонимание возникло только с браузером Opera, в нем можно посмотреть, что я в итоге хочу получить.

Посмотреть саму страницу можно тут.

В итоге: Все отображается как надо в Opera, в остальных с проблемами.

[pismenny]

Добавьте:

#container {
overflow: hidden;
}

Но, по-хорошему, нужно всё переделать, особенно там где position: absolute. Установите плагин firebug для FF, чтобы наглядно всё видеть и с помощью него посмотрите, как выглядят другие сайты.

[berg12]

Спасибо, помогло, правда не было возможности в IE проверить. А какие именно ошибки в верстке, и что плохого в position: absolute; ?

[psywalker]

Добавьте:

#container {
overflow: hidden;
}

Но, по-хорошему, нужно всё переделать, особенно там где position: absolute. Установите плагин firebug для FF, чтобы наглядно всё видеть и с помощью него посмотрите, как выглядят другие сайты.

Кстати, прежде чем клепать для каждой такой задачи overflow: hidden, следует для начала прочитать о том, почему он вообще помогает и что делает в этой ситуации, а так же узнать и рассмотреть и другие способы. Просто я давно заметил, что все советуют вешать именно overflow: hidden, не задумываясь, зачем он и почему.

Мне, например, Илюхин метод нравится, но и то, несмотря на его универсальность, я всегда выбираю подходящий способ для конкретной ситуации.

Спасибо, помогло, правда не было возможности в IE проверить. А какие именно ошибки в верстке, и что плохого в position: absolute; ?

Абсолютное позиционирование редко когда используется для построения каркаса, потому что предназначено совершенно для других целей. Относительно каркаса, я бы с помощью position: absolute делал, например, псевдо-колонки, но только в качестве заднего фона. Но верстать весь сайт на нём жестоко)

[berg12]

Кстати, прежде чем клепать для каждой такой задачи overflow: hidden, следует для начала прочитать о том, почему он вообще помогает и что делает в этой ситуации, а так же узнать и рассмотреть и другие способы. Просто я давно заметил, что все советуют вешать именно overflow: hidden, не задумываясь, зачем он и почему.

Мне, например, Илюхин метод нравится, но и то, несмотря на его универсальность, я всегда выбираю подходящий способ для конкретной ситуации.

Спасибо, помогло, правда не было возможности в IE проверить. А какие именно ошибки в верстке, и что плохого в position: absolute; ?

Абсолютное позиционирование редко когда используется для построения каркаса, потому что предназначено совершенно для других целей. Относительно каркаса, я бы с помощью position: absolute делал, например, псевдо-колонки, но только в качестве заднего фона. Но верстать весь сайт на нём жестоко)

Спасибо, полезная ссылка. Я, вроде получается, по назначению position т.к без него обертку пришлось бы разрывать, чтобы сделать задний фон.

[psywalker]

Спасибо, полезная ссылка. Я, вроде получается, по назначению position т.к без него обертку пришлось бы разрывать, чтобы сделать задний фон.

Имхо, у тя непральна всё сделано.

1. Положи сайт в общей контейнер

2. Внутрь засунь отдельно по элементу для: шапка, контент, футер.

3. В шапке уже делай и фон нужный для неё и содержимое.

4. Задний фон я бы повесил на псевдоэлемент :before для элемента body, например. Чтобы не засорять структуру. Я уже не говорю о модных грядиентах, которые можно применить вместо псевдоэлемента, в случае забивания на IE6-9. К сожалению в IE9 не пашет градиент для псевдоэлементов, если я не ошибаюсь. Там можно на дата-ури завоять)