SEO-Friendly Fluid CSS Layout with Right Sidebar
In building this site I ran into a problem I hadn't seen before. I was looking to have the sidebar on the right side of the screen, which is easily accomplished by floating it right, but in doing so the sidebar would come first in the html, decreasing the SEO-awesomeness of the page. Observe.
The archaic way of doing things:
<style>
body{ width: 100%; }
sidebar{ width: 220px; float: right; }
content { margin-right: 240px; }
</style>
<body>
<div id = "sidebar"> [sidebar content] </div>
<div id = "content"> [main content] </div>
</body>
This will work just fine, but as you can see in the markup the content in the sidebar comes first. As google weights text more depending upon its location on the page, this isn't the correct approach.
A bit of searching lead me to discover that what I was looking for was Negative Margins. Using negative margins, i can float the right sidebar and have the main content come in its seo-friendly first position, even with a fluid width. Lets take a look at the functional markup:
<style>
body{ width: 100%;}
sidebar{ width: 220px; float: right; }
content { margin-right: -240px; float: left; width: 100%;}
</style>
<body>
<div id = "content"> [main content] </div>
<div id = "sidebar"> [sidebar content] </div>
</body>
For a more thorough description you can visit the A List Apart article on negative margins.
