How to have html content first when Nav is horizontal

**Manna** · Mar 28, 2008, 20:16

I was wondering how to get my main content at the top of my html document when the Navigation goes across under the header. Here is how my main layout looks:
<div id="wrapper">
<div id="header>
</div>
<div id="nav">
</div>
<div id="content">
</div>
<div id="footer>
</div>
</div>

Thanks
If this is discussed somewhere a link would be great because I did not find it.

**Paul O'B** · Mar 29, 2008, 07:59

It all depends on the exact structure of your page but if your navigation and header are fixed heights then you simply absolutely place them into position from the end of the html.

You will need to preserve the space by using a place holder such as some margin or padding top on the wrapper and then absolutely place the elements in that preserved space.

To account for text re-sizing you should allocate the space using ems to allow the are to grow with the text.

If your header and nav are fluid heights then it can't really be done as you can't make room for an unknown height.

Here is the basic example.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
h1,p{margin:0 0 1em 0;padding:5px;}
#wrapper{
    margin:auto;
    width:760px;
    border:1px solid #000;
    position:relative;
    padding:11em 0 0 0;
    background:blue;
    color:#fff;
}
#header{
    width:760px;
    background:#ffffcc;
    color:#000;
    position:absolute;
    left:0;
    top:0;
    height:9em;
}
#content{width:760px}
#header ul{
    text-align:center;
    background:red;
    color:#fff;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    padding:.5em 0;
}
#header li {
    display:inline;
    list-style:none;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="content">
        <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
        <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
        <p>This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : This is the content : </p>
    </div>
    <div id="header">
        <h1>Header goes here</h1>
        <p>Some header content</p>
        <ul id="nav">
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
    </div>
    <div id="footer">
        <p>footer</p>
    </div>
</div>
</body>
</html>

It's not always a good solution to have your navigation after your content because you may have a lot of content and search engines may fail to index the site because they may only read so much content. (See the stickies in the SEO forum for more info).

**Manna** · Mar 29, 2008, 09:55

Thank you so much Paul. I had never used absolute positioning because I never really understood how it works and when I had tried it gave odd results. I will follow your example and give it a try. Thanks for the explanation.

The SitePoint Forums have moved.

User Tag List

Thread: How to have html content first when Nav is horizontal

Thread Tools

Display

How to have html content first when Nav is horizontal

Bookmarks

Bookmarks

Posting Permissions