floating div with variable width

[Snef]

Hi,

i'm lost in the wolrd of floating divs ;)


<div style="width: 500px; background-color: #cccccc; overflow: auto;">
<div style="float: left; width: 200px; background-color: #eeeeee;">
div1
</div>
<div style="float: left; background-color: #dddddd;">
div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2 div2
</div>
</div>


In IE it seems to work (according to my ideas). The problem is in FF with DIV2.
I want to be able to float DIV2 next to DIV1 without setting a width for DIV2. But when using this approach, div will not wrap within the remaining 300px (in IE it does).

Is it possible to get the desired result? :confused:

[Kravvitz]

IE is very buggy -- don't trust it.

Instead of floating the second inner <div> give it margin-left:200px;.

[Snef]

Hi,

That is not what I mean. I'll try to explain:

TThe left div is a dynamic filled div. When it contains nothing it will be hidden [display: none;].

The second div needs to be flexible. The second div must fill the available space (with div it is 300, without it will be 500).

It only can be done by js i think. The second div needs some sort of width unfortunately.

[ray326]

Kravvitz's suggestion should work. Did you try it?

[Snef]

But with his solution, the inner div always be at 200px left. Also when the first inner div is not there.
The content in div 1 is loaded through ajax, so I will have to use some scripting after the page has loaded. I know how to do that, but I was curious to see if it can be done without the use of javascript.