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

Question

I have a two-column layout, composed of fixed-width floated divs. Inside the first column is an extra wide element. So the html layout looks something like this:

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

As annotated, the first column contains a short amount of content and the second column contains a long amount of content. The CSS looks something like this:

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

So the extra-wide element is actually wider than its parent, column1. And I don't know the heights of any of the elements ahead of time -- they are all variable.

The issue here is that column2 appears overlapped over the extra-wide element in column1. Here's a jsfiddle to help visualize this: http://jsfiddle.net/e3KNg/ (This fiddle has some content inserted and colors added to make what's happening more clear). Here's a screenshot:

Without altering the basic HTML structure or the widths of the three elements, is it possible (without the aid of Javascript) to force the extra-wide element in column1 to appear below column2? Here is the effect I'm trying to achieve:

I know this can be done by rearranging html elements or by using Javascript, but I'm looking for a solution within the above constraints. I tried using clearing divs in various places, removing or adjusting floats, and trying some overflow settings, but could not achieve the effect I was looking for.

Answer 1

looking at it, without set heights on the content elements or using javascript to work their heights out or set positioning on the extra-wide element, what you are looking for can't be achieved.

Heres a fiddle which works using an absolute positioning of the extra wide element and a top value, as well as using some clever css to make the columns the same height.

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

As i siad this works, but i honestly feel what you are looking for can't be achieved with the restrictions you have put in place.