Question

我有两列布局。我有一个#mainContainer div包含以下所有内容（#footer除外）：

顶部：标题div（#intro）（包含一个小的渐变图像），和#hero div（包含图像）
要包含两列：#content div
在左侧的#content div中：#mainContent div
在右侧的#content div中：#sideBar div
在底部（#mainContainer div之外）：底部的#footer div （包括像标题div这样的渐变图像）

简单，对吧？但是我无法让#mainContainer div位于浏览器的顶部（没有空格或者所有浏览器都有6-8px默认边距/填充位于顶部）并且#footer div跨越整个底部浏览器窗口（不在任何Div的内部）。（忽略页脚中的内联样式）。有人可以帮助我吗？

更新：添加HTML

body {
font-family:Arial, Helvetica, sans-serif;
margin:0;
padding:0;
background:#bbb;
text-align:center;
}



#mainContainer {
width:980px;
margin: 0 auto;
background: #fff url(../i/content-box-header-gray.jpg) repeat-x;
text-align:left;
/*height: 700px;*/

}

#intro {
/*top:0;*/
margin: 0;
text-align:left;

}


#hero {
width:960px;
padding-left:10px;
padding-right:10px

}



#content {
width:960px;
padding-left:10px;
padding-right:10px;
}

#mainContent_left {

float:left;
width:640px;
margin:0;
padding-right: 20px;
background:#ccc;
}



#sideBar {
float:left;
width:300px;
margin:0;
/*padding-right: 20px;*/
background:#ffd;
}


#footer {
width:960px;
clear:both;
background:#cc9;
}

HTML：

<title>Descriptions </title>


<link rel="stylesheet" href="css/mainstyles.css" type="text/css" />
</head>

<body>
<div id="mainContainer">

<div id="intro"><h2>introducing</h2></div>

<div id="Hero">
    <ul>
        <li class="name"></li>
        <li class="textJoin">is a member of </li>
        <li class="name"></li>
    </ul>
</div>

<div id="content">
    <div id="mainContent">

        <h3>First Topic title</h3>
        <p>floated left image and text</p>
        <p>Some content</p>
        <p>Some content</p>

        <h3>Second Topic title</h3>
        <p>Some content</p>        
        <p>Image here</p>

        <h3>Third Topic title</h3>
        <p>(floated left image here) Some text</p>

        <h3>Fourth Topic title</h3>
        <p>(floated left image here) Some text</p>>

        <h3>Fifth Topic title</h3>
        <p>(floated left image here) Some text</p>        
        <p>Image here</p>

        <p>(link to FAQ page)</p>

    </div>


    <div id="sideBar">sidebar content
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div>


    <div id="footer_warranty">footer content
        <div id="wf_logos" style="float:left; padding:0 10px 0 0;"><p>contact info</p>
</div>
        <div id="wf_footerCopy" style="float:left; padding:0 10px 0 0;">
<p>some text</p></div>
        <p style="clear:both;" />
    </div>
</div>
<p style="clear:both;" />
</div>

</body>
</html>

Answer 1

尝试导入Meyer的重置样式表： http://meyerweb.com/eric/tools/css/reset/

Answer 2

我无法重现您的问题。但是，我已经为你创建了一个小提琴，我还添加了一些CSS重置规则，这些规则应该解决这个问题，跨越任何和所有浏览器。

启动新网站时，应始终使用重置CSS。这样，这完全取决于您的条款，您不必“编码”特定的浏览器行为。

我还创建了一些占位符代码，因为您没有提供任何占位符代码。

我希望重置可以解决您的问题。

http://jsfiddle.net/dekket/eERsK/

编辑：

检查这个新小提琴。出去工作。 http://jsfiddle.net/dekket/6bTkZ/

Answer 3

尝试将float:left和overflow:hidden添加到您的#mainContainer

Answer 4

您需要将html和body css边距和填充属性设置为0。

在css文件中使用以下内容

html, body {
margin: 0;
padding: 0;
}

css容器div未对齐到页面顶部

4 个答案: