Optimizing a 2 Column Layout for Search Engines

A little while ago, I published a basic centered two column layout.

A simple change to the style sheet and the code will improve this layout so that it is more accessible and search engine friendly.

Screen readers tend read a webpage in the order that it is coded rather than the order that it appears on screen, which is controlled by the style sheet. So, if the navigation appears above the content in the code (as it does in the above layout), someone using a screen reader will have to listen to all the navigation links before they hear the content.

This problem is exacerbated by the navigation being identical and repeated on every page.

Search engines need to analyse the content to determine what a page is about and rank it in the search results. However, they don’t always analyse the entire page, they might only look at the first 100 lines or so. If the majority of that is navigation, they are not going to find all the content. Also, the search engines want to find new content, which needs to be as near to the top of the page as possible.

The solution is to move the navigation div below the content div in the code. Then change the style sheet so the navigation and content div’s are floated to the right instead of to the left (replace float: left;  with  float: right;).

This retains the visual layout of navigation n the left and content on right.

Centering a Layout Horizontally

This is, what should be, a simple technique for centering a page horizontally in the browser window.

Logically, you would think all you have to do is wrap your content in a div, give this div a width (say 760px so it fits nicely on a screen resolution of 800 x 600) and set the left and right margins to ‘auto’.

#centeringwrapper {
width: 760px;
margin: 0 auto;
}

This works in Firefox and other browsers which display CSS correctly, but of course with Internet Explorer nothing is that straight forward.

IE doesn’t interpret the automatic left and right margins. However we can use another incorrect CSS interpretation to achieve the desired effect in IE. If you apply a centering text alignment to the body tag, IE applies it to all divs within the body, thus centering them. However, this also centers all body text on the page so we need a further fix to reset the text to align to the left.

Finally, the body tag needs to have a minimum width equal to the width of the centering wrapper. This deals with an issue in older Mozilla browsers where reducing the size of the browser window results in half of your centered div hanging off the left of the page.

So the final CSS looks like this:

body {
text-align:center; /* IE centering fix */
min-width: 760px; /* Mozilla resizing fix*/
}
#centeringwrapper {
width: 760px;
text-align:left; /* Negates IE centering fix in other browers*/
margin: 0 auto; /* Ccentering in non-IE browers*/
}