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

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.