Html CSS框模型将元素推到页面下方_Html_Css

Html CSS框模型将元素推到页面下方

html css

Html CSS框模型将元素推到页面下方,html,css,Html,Css,嗨，我正在尝试修复一些测试html来与opera/chrome一起工作。它正在使用在IE和firefox中，它看起来像在chrome、opera和safari中，它向下推动侧边栏元素。我玩过边距和垫子，但仍然不起作用。我错过什么了吗身体{ 最小宽度：500px；填充：0 106px； } #中间、#左、#右、#侧边栏、#主{ 位置：相对位置；浮动：左； } #居中{ 宽度：100%；背景：#CCC； } #左{ 宽度：106px；左边距：-100%；右：106px；背景：

嗨，我正在尝试修复一些测试html来与opera/chrome一起工作。它正在使用

在IE和firefox中，它看起来像

在chrome、opera和safari中，它向下推动侧边栏元素。我玩过边距和垫子，但仍然不起作用。我错过什么了吗


身体{
最小宽度：500px；
填充：0 106px；
}
#中间、#左、#右、#侧边栏、#主{
位置：相对位置；
浮动：左；
}
#居中{
宽度：100%；
背景：#CCC；
}
#左{
宽度：106px；
左边距：-100%；
右：106px；
背景：#C0C；
}
#对{
宽度：106px；
右边距：-106px；
背景：#CC0；
}
#标题{
宽度：100%；
背景：#0CC；
}
#页脚{
宽度：100%；
背景：#A0E；
明确：两者皆有；
}
#内容{
右侧填充：330px；
背景：#F00；
}
#主要{
宽度：100%；
填充：5px15px；
}
#边栏{
宽度：300px；
右边距：-300px；
背景：#33C；
}
标题
复制
一边
页脚
左边
正确的

好吧，我知道min width在BODY标签上不起作用，至少在某些版本的IE中是这样（尽管我认为它在Firefox中起作用）。您可能希望尝试将整个页面放在DIV标记中，并在该标记上设置最小宽度。

我在Safari和Firefox中都能使用它（尚未测试其他浏览器）

更改此项：

#内容{
右侧填充：300px；
背景：#F00；
}
#主要{
填充：5px15px；
宽度：100%；
右边距：-30px；
}

不知道为什么它比上面的效果更好，但它确实如此：）

但是，如果您正在寻找基于网格的预制布局，我建议。我已经在很多项目中使用过它，而且它非常容易使用。这是一个固定的布局（不像你的那样流畅），因此可能会破坏交易。

小心使用来自750px固定宽度内容网站的任何内容。

<!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>