Fixed 3 Column Site - html

Question

I know this has been asked before but im curious to see if things have changed.
I'm looking for a html/css fixed 3 column layout with the main content (middle) area located first (of the 3 columns) in the DOM - for SEO.
Any ideas?

Answer 1

It requires a bit extra markup, but to get the content to be first, you can try something like this:
<div id="wrapper">
<div id="content-wrapper">
<div id="content">I'm first</div>
<div id="side_a">I'm second</div>
</div>
<div id="side_b">I'm third</div>
</div>
And in CSS:
#wrapper {
width: 800px; /* Total width of all columns */
margin: 0 auto;
}
#content-wrapper {
float: left;
}
#content {
width: 400px;
float: right;
}
#side_a {
width: 200px;
float: left;
}
#side_b {
float: left;
width: 200px;
}
#wrapper contstraints the columns to the width of 800px and makes the page centered. The #content and #side_a columns are arranged inside #content_wrapper in reverse order using different floats. #side_b is then floated alongside #content_wrapper.
A working example can be found here:
http://www.ulmanen.fi/stuff/columns.php

Answer 2

This is the same approach used Tatu, but with:
a header
a footer
a fluid width instead of fixed sizes
columns that have full height background colors
extra divs to pad the content in the columns
You can test it on jsfiddle: http://jsfiddle.net/BzaSL/
HTML:
<div id="header">First: Header</div>
<div id="wrapper">
<div id="content-wrapper">
<div id="content">
<div id="contentpad">
<h2>Second: Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus turpis dui, porta consectetur dictum id, rhoncus non turpis. Praesent vitae fermentum enim. Donec consequat accumsan nibh et tempor. Duis sem enim, interdum eget vestibulum vitae, semper ac arcu. Maecenas convallis imperdiet libero, bibendum vulputate nulla tempus in. Duis eu purus eget lectus tincidunt fermentum. Vestibulum sit amet nunc et metus auctor ullamcorper. Vestibulum ut dui purus, nec hendrerit orci. Aliquam erat volutpat. Praesent a nibh vitae enim fringilla aliquam.</p>
</div>
</div>
<div id="leftcol">
<div id="leftcolpad">
Third: Left column
</div>
</div>
</div>
<div id="rightcol">
<div id="rightcolpad">
Fourth: Right column
</div>
</div>
</div>
<div id="footer">Fifth: Footer</div>
CSS:
/* wrapper has all three columns, it is 100% of page width.
* background applies to the right column.*/
#wrapper { width: 100%; margin: 0 auto; background-color:#CCFFFF; }
/* clear floating elements before footer */
#wrapper:after { display: block; content: ""; clear: both; }
/* content-wrapper is left two columns; 80% of wrapper width.
* background applies to left column */
#content-wrapper { float: left; width:80%; background-color:#FFFFCC; }
/* content is 75% of the content-wrapper width */
#content { width: 75%; float: right; background-color:#FFCCFF; }
/* leftcol is the other 25% of the content-wrapper width */
#leftcol { width: 25%; float: left; }
/* rightcol is 20% of thet wrapper width */
#rightcol { float: left; width: 20%; }
/* Adding padding or margin directly to the columns messes up the layout */
#contentpad, #leftcolpad, #rightcolpad, #footer, #header{ padding:1em; }
#footer{ background-color:#CCCCFF; }
#header{ background-color:#FFCCCC; }