Posted by Snef on 10/17/06 21:23

jojo wrote:
> Snef 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?
>>
>> 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>
>
> Simply set a margin-left:200px; to your right <div>. Should work. If you
> have a border applied to your <div>s add the border-width to the margin.
> If you are not sure about howmuch to add just set margin-left: 210px;,
> this should be enough.
No, not what I meant.

The second div should fill the available space leftover. The first div can be
hidden when empty: div 2 is placed to the left and fills the whole space!

[Back to original message]