1. Вы еще не понимаете, как работают элементы с плавающей запятой и элементы рядом с ними.
2. Вы забываете основы блочного контейнера.
3. Я предполагаю, что вы смотрели на стилистику [sic] от авторов тем и плагинов WP, которые склонны бросать {position:relative;} почти во все, не имея понятия, почему.
(На самом деле это очень старая вещь IE {ошибка}, которая в большинстве случаев даже не была нужна тогда, если они понимали, что IE не работает hasLayout.)
О. Элементы блока, смежные с поплавком, не знают о его существовании и перетекают под поплавок.
Только встроенное содержимое блока «видит» поплавок.
Чтобы элемент знал о плавающем элементе, необходимо создать новый контекст форматирования блока.
Простой способ сделать это — создать элемент {overflow: скрытый;}. Есть полдюжины способов сделать это, см.
http://gtwebdev.com/workshop/floats/enclosing-floats.php
и игнорировать вещи IE6. Это было написано очень давно.
Это также должно решить проблему {margin: auto;}.
Б. Блок-контейнер автоматически заполняет свой собственный контейнер из стороны в сторону.
Если вы укажете ширину 100% (например) и добавите отступы или границы, вы создадите горизонтальное переполнение.
{max-width: 100%;} может быть полезен, но я не могу придумать ни одного варианта.
C. Это самоочевидно.
Не применяйте относительное позиционирование без веской и рациональной причины.
D. Просто потому, что если вы объявляете цвет, объявляйте и цвет его фона, и наоборот.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content=
"ширина = ширина устройства, высота = высота устройства, начальный масштаб = 1"
name="viewport">
<title>
Test document
</title>
<style type="text/css">
/*<![CDATA[*/
html {
padding: 0;}
body {
background-color: white;
color: black;
font: 100%/1.5 sans-serif;
margin: 0;}
p {
font-size: 1em;}
h1,
h2 {
font-family: serif;
margin-bottom: 0;}
/* end boilerplate */
#top {
background-color: #000;
color: white;
height: 30px;
padding: 1em;
border-bottom: solid 2px #000;
margin:0 0 0 0;}
#left {
background-color:#555;
color: white;
width:150px;
height: 722px;
padding: 5px;
margin-bottom: 0;
float: left;}
#main {
background-color: #FFF;
color: black;
max-width: 464px;
height: 700px;
overflow: hidden;
padding: 5em;
border: solid 1px #888;
border-radius: 5em;
margin: 10px auto 10px;}
#footer {
background-color: #000;
color: white;
height: 30px;
padding: 1em;
border-top: solid 2px #000;}
/*]]>*/
</style>
</head>
<body>
<div id="top">top</div>
<div id="left">left</div>
<div id="main">main</div>
<div id="footer">footer</div>
</body>
</html>
Код (разметка): //edit: мне очень не нравится, что форматирование теряется при вставке.
~gt
Гэри
