使用CSS强制浮动列-1中的过宽元素出现在浮动列-2下方

Question

我有一个双列布局，由固定宽度的浮动div组成。第一列内部是一个超宽元素。所以html布局看起来像这样：

<div id="container">
    <div id="column1">
        ...short content...
        <div id="extra-wide">
            ...wide content...
        </div>
    </div>
    <div id="column2">
        ...long content...
    </div>
</div>

注释时，第一列包含少量内容，第二列包含大量内容。 CSS看起来像这样：

#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }

因此，超宽元素实际上比其父元素column1更宽。而且我不知道任何元素的高度 - 它们都是可变的。

这里的问题是column2看起来与column1中的extra-wide元素重叠。这是一个帮助可视化的jsfiddle：http://jsfiddle.net/e3KNg/（这个小提琴插入了一些内容并添加了颜色以使发生的事情变得更加清晰）。这是一个截图：

如果不改变基本HTML结构或三个元素的宽度，是否可以（不借助Javascript）强制column1中的超宽元素出现在column2下面？这是我想要实现的效果：

我知道这可以通过重新排列html元素或使用Javascript来完成，但我正在寻找上述约束内的解决方案。我尝试在各个地方使用清除div，删除或调整浮动，并尝试一些溢出设置，但无法达到我想要的效果。

Answer 1

看着它，没有设置内容元素的高度，或者使用javascript来处理它们的高度或者在超宽元素上设置定位，你正在寻找的东西是无法实现的。

这是一个小提琴，它使用超宽元素和顶值的绝对定位，以及使用一些聪明的css使列具有相同的高度。

http://jsfiddle.net/yKRu4/1/

正如我所做的那样，但老实说我觉得你所寻求的是无法实现的限制。