Я использую следующий код для создания термоусадочной и центрированной страницы.Все хорошо, если окно браузера шире максимальной потенциальной ширины.В этом случае есть три плавающих абзаца с фиксированной шириной.Если окно достаточно широкое, чтобы все они могли плавать на одной линии, div центрируется и корректно оборачивается.Но когда браузер уже, а один из абзацев переносится на следующую строку, div расширяется до полной ширины окна и больше не переносится в термоусадочную пленку.Я перепробовал все, что мог придумать, и собираюсь сдаться и двигаться дальше, если у кого-то не возникнет новая идея.Как ни странно, это хорошо работает в ie7.Иди цифрой.
<!doctype html>
<head>
<style type="text/css">
header, footer, nav, section, article { display: block; }
body
{
font-size:1em;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, Sans-Serif;
color:#000;
background:#ddd url(images/BG.jpg);
}
/*********** Start shrink wrapped and centered layout styles ************************/
#page {
position:relative;
overflow:hidden;
}
#container {
float:left;
position:relative;
left:50%;
}
#content
{
float:left;
position:relative;
right:50%;
}
/*********** End shrink wrapped and centered layout styles ************************/
#content
{
border:solid 4px #bbb;
}
p
{
width:20em;
background-color:red;
float:left;
}
</style>
<body>
<div id="page">
<div id="container">
<div id="content">
<p>p1</p>
<p>p2</p>
<p>p3</p>
</div>
</div>
</div>
</body>
</html>