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