Content is determinant for the performance of your website in search engine. It really helps to have a fresh content, talking about the subject you want to rank for. For more optimization here is a little trick you can use to place your content to be read first by spiders, after any menu or sidebar. This technique use the CSS absolute position property.

We will take an example of an horizontal menu and a content div but it can be applied to vertical sidebar as well.

html:

<div id="page">
<div id="content">
<p>Content, appear first in the code</p>
</div>
<div id="menu">
<p>Menu, appear last in the code</p>
</div>
</div>

Without any style this produce something like:

Now let’s get this menu at the top:

CSS:

*
{
margin:0px;
padding:0px;
}
#page
{
width:780px;
margin:auto;
position:relative;
padding-top:40px;
}
#menu
{
position:absolute;
height:40px;
width:780px;
background:orange;
top:0px;
color:black;
}
#content
{
background:black;
height:400px;
color:white;
}


What do we have here?

First a little reset to get ride of standards margin and padding. Following are the ‘page’ div properties. We use a position:relative so every element inside will be positioned from this one. The padding-top is used to live the space for the menu div. Last we position our menu div at the top of his parent with the position:absolute and top:0px.

Download the source for this example