Posted by Ben C on 10/17/06 15:23

On 2006-10-17, Snef <s.franke@snefit.com> wrote:
> Ben C wrote:
>> On 2006-10-17, Snef <s.franke@snefit.com> wrote:
>>> Hi,
>>>
>>> I'm trying to do a simple thing but for some reason I do not get it
>>> right.
>>>
>>> I have 2 div's that are floating next to eachother. The most left
>>> div is 200px in width. The div on the right is of unknown width
>>> (that depends on the left div, that one can be hidden when there is
>>> no content in it). In IE the right div is displayed next to the
>>> left one, but FF shows it onder the first because it has no width
>>> set.
>>>
>>> How can this be solved?
>>
>> Set a width on the second div as well.
>>
>> Don't know what IE is up to but FF is showing correct behaviour here.
[snip]
> Thank you for yor reply.
> Your solution is just the problem... I do not know the width of the
> second div (in the real world example). The first div can also be
> hidden (display:none) and then I would like to stretch the second div
> to maximum width. So this can not be done by CSS, i need to use
> Javascript i think (I know how to do that!)???

Of course it can be done with CSS! You could try absolute positioning
instead of floats:

div#first
{
position: absolute;
width: 200px;
left: 0px;
}

First div is 200px wide and starts on the left.

div#second
{
position: absolute;
left: 200px;
right: 0px;
}

Second div is 200px from the left and goes all the way to the right of
the viewport. Width will be computed automatically.

When you set #first to display: none, also set div#second's left to 0px
at the same time. This can be done either with JS or with
pseudoselectors.

[Back to original message]