2 div列：固定和液体。固定一个必须是可移动的。液体必须是代码中的第一个

请考虑以下2个cols html结构：

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; }

jsFiddle中的相同代码 - http://jsfiddle.net/vny2H/

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

所以我们有2列。左列宽度固定，右边宽度为液体。
如果我们从html中删除左列，右列将延伸到父#container宽度的100％。

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.

问题是：我们可以更改顺序的左右列？
（我需要它为SEO）

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>

感谢。

有一个有趣的方法来达到我想要的，但固定列变得不可移动。该方法基于负边际。 http://jsfiddle.net/YsZNG/

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; }

所以我们有两种方法：

1. 对于固定列使用float，对于液体使用overflow：hidden。固定柱变得可移动。


2. 使用负边距。液体柱在代码中第一。但固定的一个是不可移除的。

有固定的列是可移动的，而液体的第一个是代码中的第三种方法？

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

半决定已由@ lnrbob。主要思想 - 使用表式的div。 http://jsfiddle.net/UmbBF/1/

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.