CSS to give float inside container priority

float:left behaves differently in chrome and ie7 as shown by this fiddle and ascii-art below:

IE7 does,

<-width->
Col1 Col2
text # #
     # #
     # #

instead of

<-width->
Col1
text
col2
# # # # #
#

Is there a way to get the ie7-behaviour in all browsers?

In other words not stack col1 and col2 unless the page is very narrow. The goal is to have a "superfluid" two-column layout where col1 fits its content and col2 uses the remaining width of the window and wraps its conten开发者_运维问答t or is shown below col1 if it cannot fit beside it.

Rewritten to be more precise after feedback in answer and comments.

---

I'm still having trouble understanding what you're after and what the problem is. I'm going to just post an answer and you can shoot down the ideas as we go.

Attempt 1:

You need to set a width on at least one of the columns.

Try this and tell me what's wrong with it. http://jsfiddle.net/LpkQX/27/

Attempt 2:

Float the right column inside the left column. Now column1 is just a wrapper.

http://jsfiddle.net/LpkQX/28/