Размещение DIV с использованием CSS

Question

Скажите, у меня есть следующие DIV:

<div id="top">Page header</div>
<div id="main">Main content</div>
<div id="sidebar">Sidebar content</div>
<div id="bottom">Page footer</div>

Как я могу использовать CSS, чтобы разместить боковую панель DIV справа от основного DIV и установить, скажем, 20% от общей ширины?

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

Хотелось бы, чтобы он работал во "всех" браузерах, включая этого ублюдочного IE6 ...

Answer 1

поместите основную и боковую панель в оболочку, вы можете установить размер / расположение оболочки и сохранить ваш макет.

#top {
  /* top stuff */
}
#wrapper {
  width: 800px;
  margin: 0px auto; /* centers on page */
}
#main {
  float: left;
  width: 80%;
  margin-right: 10px;
}
#sidebar {
  float: left; /* by floating left here you have a greater control over the margin */
  width: 20%;
}
#bottom {
  /* bottom stuff */
}

Answer 2

Я отвечу на свой вопрос со ссылкой на эту статью, которая была именно то, что я искал:

http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Answer 3

Очень очень важно, чтобы вы установили строгий тип документа, вот так:

Если вы сделаете это, вам не нужно очищать свой CSS (за небольшим исключением) и вы можете просто использовать правильные блочные модели.

Answer 4

<div id="top">Page header</div>
<div id="main">
    <div id="content">Main content</div>
    <div id="sidebar">Sidebar content</div>
</div>
<div id="bottom">Page footer</div>


#top, #main, #bottom { float: left; clear: both; width: 100%; margin-bottom: 1em; }
#sidebar { float: right; width: 20%; }
#content { float: right; }

Answer 5

Попробуйте:

html, body, div { margin: 0; padding: 0; border: 0 none; } /* primitive reset CSS */
#main { float: left; width: 80%; }
#sidebar { float: right; width: 20%; }
#bottom { clear: both; }

Для такого рода вещей важно использовать reset CSS (есть другие), так как разные браузеры имеют разные значения по умолчанию для таких вещей, как границы, поля и отступы.

Answer 6

использование float с, отрицательное margin с и padding.

Вы можете найти хорошие учебники на http://alistapart.com о макете страницы (я действительно рекомендую Святой Грааль ), и это также много решает кросс-браузерные проблемы

http://www.alistapart.com/articles/holygrail