How to optimize your website layout to ensure your content is the first one in the page

2007-10-09

A small tutorial on how to structure your website layout, to order your page content according to its importance and display it in the standard way

I think you noticed the standard website layouts these days. Most websites have the following structure:

The importance of these sections is as follows:

  1. Page content
  2. Navigation menu
  3. Page Header
  4. Page footer

Most search engines are pretty smart on figuring out what content is repeated on your pages and determine your page header, navigation menu and page footer accordingly.

Web pages display the content in the same order as it is contained in the html source. Using css, you can change the display order of your page content.

In this way you can have your sections in html ordered according to their importance and display it to the user in the standard layout that he is used to.

The trick is very simple. Most sections like "header" are fixed, so you can have an absolute positioned layer (div) to display it. So, as you know, you can place an absolute positioned layer anywhere in your source code.It will be displayed in the same position becuase it has an absolute position.

The other trick is to use "float" to swap div position and voila.

Enough talking, let's write the code.

The html code

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <meta http-equiv="content-language" content="en" />
  <title>Optimized page</title>
  <link href="optimized.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="container">
		<div id="content">
			1 Content
			<p>View the source of this page to see the section order</p>
		</div>

		<div id="navigation">	
			2 Navigation
		</div>
	</div>

	<div id="header">	
		3 Header
	</div>

	<div id="footer">	
		4 Footer
	</div>
</body>
</html> 

The CSS

body
{
	/*ie nedds these*/
	margin:0px;
	padding:0px;
	font-size:24px;
	font-family:Arial;
	/*align center for IE*/
	text-align:center;	
}
/*
	make text more visible
*/
div
{
	text-align:center;
	line-height:1.2em;
}

/*we use #container DIV  to center #content and #navigation in the page*/
#container
{
	/*our page width*/
	width:1000px;
	/*center relative div*/
	margin:auto auto;
	/*make space for the header*/
	margin-top:200px;
}
#content
{
	/*  we substracted navigation width from page width and got 800px*/
	width:800px;
	height:auto;
	/* have a minimum height, this does not work in IE*/
	min-height:300px;
	/* use float to inverse position with navigation DIV*/
	float:right;
	/*color section for identification*/
	background:#ff0000;
}

/*
	internet explorer min-height fix 
	can be removed if you don't need a minimum height
	in this way your CSS will be clean from hacks
*/
* html #content
{
	height:300px;
}


#navigation
{
	/* set margin top to header height*/
	float:left;
	height:auto;
	/* have a minimum height, this does not work in IE*/
	min-height:300px;
	width:200px;
	/*color section for identification*/
	background:#fd6464;
}

/*
	internet explorer min-height fix 
	can be removed if you don't need a minimum height
	in this way your CSS will be clean from hacks
*/	
* html #navigation
{
	height:300px;
}

#header
{
	/* postion absolute so we can place our div anywhere on the page, in this case the first div*/
	position:absolute;
	/*our page width*/
	width:1000px;
	/*center absolute  div*/
	/*put div on the center of the page*/
	left:50%;
	/*move div 50% right to put it in the center of the page*/
	margin-left:-500px;
	/*pu the div fist on the page*/
	top:0px;
	height:200px;
	/*color section for identification*/
	background:#f9acac;
}
#footer
{
	width:1000px;
	clear:both;
	/*center relative div*/
	margin:auto auto;
	/*color section for identification*/
	background:#ffd4d4;
	height:30px;
}

To see a live example click here

To download all fiels for this example click here

Don't forget that the most important SEO rule is "Have good, original content". All other optimization just fade to this and help you for a limited time, because search engines change their algorithms pretty often. Of course, pushing your content higher in the page is also a good optimization that will help you, whatever the algorithms are.

Share this with the world

Related

Comments

Desiree

how do you repeat the content and the navigation?

Posted on 2009-07-02 00:01:11
psycho_nude

Thanks for a great little tutorial! I learned a lot from the three ways of positioning:
header is absolute
container/footer are centered in the flow with neg margins
content is floated
I appreciate the minimal markup, as I tend toward divitis :)

So I'm wondering, why not position all the elements like the header, using absolutes?

Posted on 2010-05-13 20:37:48
psycho_nude

I've been working with this layout for a while, and realized the container collapses, so you can't do faux backgrounds.

But if you put the footer inside, the container expands!

Might as well put the header in there too; you can still position it absolutely.

With this new markup, you can set the width of the container, and you won't have to set the width of the header/footer, either

Posted on 2010-05-13 22:15:42

Make yourself heard

Categories

Subscribe

All Posts

All Comments

© Copyright CodeAssembly

All code is licensed under LGPL, unless otherwise noted

littlebubu