2 div columns: fixed and liquid. Fixed one must be removable. Liquid one must be the first in code

Question

Consider the following 2 cols html structure:

<div id="container">
    <div class="left">some text</div>
    <div class="right">some text</div>
</div>

CSS:

#container { overflow: hidden; }
.left { float: left; width: 200px; background: red; }
.right { overflow: hidden; background: green; }

The same code in jsFiddle - http://jsfiddle.net/vny2H/

So we have 2 columns. The left column width is fixed, the width of the right one is liquid. If we remove the left column from html, the right column stretches to 100% of parent #container width.

The question is: can we change the order of the left and right columns? (I need it for SEO)

<div id="container">
    <div class="right"></div>
    <div class="left"></div>
</div>

Thanks.

---

Added

There's one interesting method to reach what I want, but fixed column becomes not removable. The method is based on negative margin. http://jsfiddle.net/YsZNG/

HTML

<div id="container">

    <div id="mainCol">
        <div class="inner">
            <p>Some text</p>
            <p>Some text</p>
            <p>Some text</p>
            <p>Some text</p>
        </div><!-- .inner end -->
    </div><!-- .mainCol end -->

    <div id="sideCol">
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
    </div><!-- .sideCol end -->

</div><!-- #container end -->

CSS

#container { overflow: hidden; width: 100%; }

#mainCol { float: right; width: 100%; margin: 0 0 0 -200px; }
#mainCol .inner { margin: 0 0 0 200px; background: #F63; }

#sideCol { float: left; width: 200px; background: #FCF; }

So we have 2 ways:

1. Using "float" for the fixed column and "overflow: hidden" for the liquid. Fixed column becomes removable. But liquid one goes second in code.
2. Using negative margin. Liquid column goes first in code. But fixed one is not removable.

Is there a third way, when fixed column is removable and liquid one is the first in code?

---

Added

Half-decision has been suggested by @lnrbob. The main idea - using table-like divs. http://jsfiddle.net/UmbBF/1/

HTML

<div id="container">
    <div class="right">some text</div>
    <div class="left">some text</div>
</div>

СSS

#container { display: table; width: 100%; }
.right { display: table-cell; background: green; }
.left { display: table-cell;  width: 200px; background: red; }

This method is suitable, when a fixed column is placed to the right in a site. But if we need it to the left - it seems to be impossible to do this.

Answer 1

Consider the semantics of the content you are marking up before anything else, that will almost always lead to a solution that has both decent markup and is search engine friendly.

For instance, is .right the main content of the page, and .left some supplementary information or navigation? In that case, mark it up as such and the search engines will do a good job of interpreting it the way you want them to. HTML5 provides many elements for just this purpose:

<div id="container">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#">etc.</a></li>
        </ul>
    </nav>
    <article>
        <h1>My nice, juicy content</h1>
        <p>Cool stuff, huh?!</p>
    <article>
</div>

Or for supplementary content you might consider <aside> or simply <div role="supplementary">.

Google will happily scrape that and recognise the difference between the navigation and the actual content, the idea that source order is important no longer applies to SEO in the same way it did a few years ago.

Answer 2

Because your elements have same height you can do this:

#container { overflow: hidden; position:relative; }
.left { float: left; width: 200px; height: 200px; background: red; position:absolute; top:0; left:0; }
.right { overflow: hidden; height: 200px; background: green; margin-left:200px;}

Fiddle page: http://jsfiddle.net/Ptm3R/9/