CSS блочная модель толкает элемент ниже на странице
Привет, я пытаюсь немного поправить тестовый html для работы с оперой / хромом. Он использует модель коробки святого грааля от мэтта левина.
В IE и firefox это выглядит как
правильный макет http://img187.imageshack.us/img187/4049/writedn1.jpg
В Chrome, Opera и Safari он сдвигает элемент боковой панели вниз. Я играл с полями и отступами, но это все еще не работает. я что-то пропустил?
неправильный макет http://img73.imageshack.us/img73/6279/wrongpx8.jpg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<style type = "text/css">
body {
min-width:500px;
padding: 0 106px;
}
#center, #left, #right,#sidebar,#main {
position:relative;
float:left;
}
#center {
width:100%;
background:#CCC;
}
#left {
width:106px;
margin-left: -100%;
right:106px;
background:#C0C;
}
#right {
width:106px;
margin-right: -106px;
background:#CC0;
}
#header{
width:100%;
background:#0CC;
}
#footer{
width:100%;
background:#A0E;
clear:both;
}
#content{
padding-right:330px;
background:#F00;
}
#main{
width:100%;
padding:5px 15px;
}
#sidebar{
width:300px;
margin-right: -300px;
background:#33C;
}
</style>
</head>
<body>
<div id = "center">
<div id = "header">header</div>
<div id = "content">
<div id = "main">
copy
</div>
<div id = "sidebar">
side
</div>
</div>
<div id = "footer">footer</div>
</div>
<div id = "left">
left
</div>
<div id = "right">
right
</div>
</body>
</html>
Ответы 2
Что ж, я знаю, что min-width не работает с тегом BODY, по крайней мере, в некоторых версиях IE (хотя я думал, что это работает в Firefox). Вы можете попробовать поместить всю свою страницу в тег DIV и установить для него минимальную ширину.
Я заставил его работать как в Safari, так и в Firefox (еще не тестировал другие браузеры)
Измените это:
#content{
padding-right:300px;
background:#F00;
}
#main{
padding:5px 15px;
width: 100%;
margin-right: -30px;
}
Не знаю, почему это работает лучше, чем у вас выше, но это так :)
Однако, если вы ищете готовые макеты на основе сетки, я бы посоветовал ЧертежCSS. Я использовал его для множества проектов, и он действительно прост в использовании. Это фиксированный макет (не такой гибкий, как ваш), так что это может помешать сделке.
Остерегайтесь использовать что-либо с сайтов с содержимым фиксированной ширины 750 пикселей.