Posted by Ben C on 10/17/06 13:28

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.

Since the div's preferred width (width of its content with no line
breaks) is greater than the containing width, the computed width is the
containing width. The containing width is wider than the space left to
the right of the first div, so the float moves down to find enough room.

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

[Back to original message]