css - 如何使内容 div 不与标题重叠？

Question

我得到了如下的 html 结构，

<div id="page-wrap">
    <header>
        <div id="logo">
        </div>
        <nav>
            <ul>
                <li><a href="">text 1</a><li>
                <li><a href="">text 2</a></li>
                <li><a href="">text 3</a></li>
            </ul>
        </nav>
    </heder>

    <div id="main-content">
        <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
    </div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->

使用 CSS

#page-wrap {
max-width:850px;
top:0;
bottom:0;
height:100%;
margin: 0 auto;
} 

header {
padding: 80px 0px 0px 0px ;
position: relative;
}

#logo {
position: absolute;
left:0;
width:123px;
height:122px;
background:transparent url(../images/logo.png) no-repeat;
}

header nav {
position: absolute;
right:0;
}

header nav ul {

}

header nav ul li {
display:inline;
list-style: none;
}

如上.. 主要内容 div 与标题重叠 >.< 请建议用于获取主要内容的 propper css 距离标题底部有 80px 的距离..(标题上有一个高度为 122px 的 Logo )

Answer 1

HTML

<div id="page-wrap">
    <header>
        <div id="logo"> </div>

        <nav>
            <ul>
                <li><a href="">text 1</a><li>
                <li><a href="">text 2</a></li>
                <li><a href="">text 3</a></li>
            </ul>
            <div class="clear"> </div>
        </nav>
        <div class="clear"> </div>
    </header>

    <div class="clear"> </div>

    <div id="main-content">
        <h1>Some Heading</h1>
        <p>Some Text</p>
        <div>A div</div>
    </div> <!-- end of main-content -->
</div> <!-- end of page-wrap -->

CSS:

html, body {
    height: 100%;
}

#page-wrap {
    max-width:850px;
    height:100%;
    margin: 0 auto;
} 

header {
    margin: 80px 0 0 0;
}

#logo {
    width:123px;
    height:122px;
    background: url("../images/logo.png") no-repeat;
    float: left;
}

header nav {
    float: right;
}

header nav ul {

}

header nav ul li {
    display:inline;
    list-style: none;
}
#main-content {
 margin: 80px 0 0 0;
}

.clear {
    clear: both;
}

查阅 CSS clear: both，您就会明白我为什么使用 clear。