Question

i got an html structure as below,

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

with 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;
}

as above.. the main-content div overlaps the header >.< please suggest propper css for getting main-content have an 80px distance from bottom of the header.. (there is a logo with 122px height on the header)

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;
}

Look up CSS clear: both, and you’ll understand why I used clear.