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/