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

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-ce开发者_如何学Pythonll;  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.

---

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.

---

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/

---

I still think that this is a rather pointless endeavour, because the only reason to try is for dubious SEO benefits. But, I've been dragged back to this question so many times that I'm going to bring something to the table.

If I was forced on pain of death to come up with a pure CSS solution, this is it - but I don't recommend it:

http://jsfiddle.net/RbWgr/

The magic is transform: scaleX(-1);. That's applied to .container to flip the visual order, and then also to the child divs so that the content of each div is not flipped.

• It won't work in IE7, because I'm using display: table-cell.
• It's not so hot in IE8 - any text looks horrible, as is usual with filters. But, it does work.
• Extra div wrappers were required to make it work in Opera - and the text doesn't look perfect.

It works fantastically in other modern browsers (IE9, Chrome, Safari, Firefox), but applying transforms to a parent of "every element" might have unforeseen consequences.

---

To be honest, I'm not sure why you're boiling it down to having to use only two id's ( [#left / #right] OR [#mainCol / #sideCol] )...

Would it not be far easier to use the mainCol/sideCol solution you had in JSFiddle at http://jsfiddle.net/YsZNG/ and introduce a third class that could be applied to the main div in the absence of the sideCol programmatically.

As in http://jsfiddle.net/biznuge/aAE3q/4/

Sorry. I may well have missed the point of all this, but I've had previous gut wrenching agony with trying to work in fluid/fixed mixture sites so just thought I'd share my own feelings on the matter...

UPDATE

I provided a second answer to this now that I think works. Sorry to double answer but it seemed sufficiently different from my initial response that I thought it would stand on its own two feet.

---

Depends on your browser support requirements. For IE8 and above (and all modern browsers) you could use display: to set a table layout (still using your <div />'s of course.)

Here is an example -I've only added javascript so you can toggle whether the element is hidden or not easily :)

---

How about putting the left col inside the right one at the bottom?

http://jsfiddle.net/vny2H/32/

---

http://jsfiddle.net/biznuge/aAE3q/12/

this seems to satisfy the brief I think. Works in FF anyway, but I'm unsure how other browsers might react to the table type display attributes.

UPDATE

Have tested this in FireFox(4), IE(9), Opera(11), Safari(5)[Win] and Chrome(12) and the layout seems to be robust across all browsers.

Rather surprising really...

UPDATE FOLLOWING CLARIFICATION

thanks to @thirtydot for that

http://jsfiddle.net/biznuge/aAE3q/19/

Works ONLY in Firefox 4 as far as I can tell, after some brief checking... But it's a start...