floating divs width unknown width

[Snef]

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>

 

[Ben C]

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.

 

[Snef]

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.

Ben,

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!)???

Snef.

 

[Ben C]

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.

 

[jojo]

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.

 

[Snef]

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!

 

[nagasaki mike]

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!

why would the first div be empty?

 

[nagasaki mike]

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>

what is the enclosing div for? it is 500px wide so nothing is going to go
wider than that.
kill the enclosing div. oh and make your right div float:right. though this
div will only stretch as far as its content.
and then
<div style="float: left; width: 200px; background-color: #eeeeee;" >this
will disappear when empty</div>
<div style="float: left; background-color: #dddddd;">
this will only stretch as far as its content</div>

 

[nagasaki mike]

what is the enclosing div for? it is 500px wide so nothing is going to go
wider than that.
kill the enclosing div. oh and make your right div float:right. though this
div will only stretch as far as its content.
and then
<div style="float: left; width: 200px; background-color: #eeeeee;" >this
will disappear when empty</div>
<div style="float: left; background-color: #dddddd;">
this will only stretch as far as its content</div>

eek ignore the float right bit....

 

[nagasaki mike]

eek ignore the float right bit....

oh dear vodka. anyway if the right div fills up the leftover space with more
to spare it will then flow underneath the first div. so you could give the
first div a very tall height thing. or give the second div (as said
previously by better men than me) a left hand margin of 200 - and just make
sure the first div is never empty so it doesnt look funny. yikes. i'll get
my coat.

 

[nagasaki mike]

div
oh dear vodka. anyway if the right div fills up the leftover space with more
to spare it will then flow underneath the first div. so you could give the
first div a very tall height thing. or give the second div (as said
previously by better men than me) a left hand margin of 200 - and just make
sure the first div is never empty so it doesnt look funny. yikes. i'll get
my coat.

right... last go. ignore the 'make the first div really tall' bit because
that doesnt work (in opera or firefox) when the right div contains more
content than the remaining width of your viewing area - it just goes under
the left div.
anyway. give right dive left hand margin of 200 and dont leave left hand div
empty. my coat is now on and i may be a while.

 

[nagasaki mike]

<div style="position: absolute; width: 200px; background-color:
#eeeeee;">vodka</div>
<div style="position: absolute; margin-left:200px; background-color:
#dddddd;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut gravida. Donec
nec tellus eu magna malesuada facilisis.
Suspendisse adipiscing nisl sit amet metus. Praesent rhoncus ullamcorper
velit. Nam tortor. Maecenas volutpat commodo urna.
Etiam ornare erat at enim. Cras a velit.</div>



ah well works in everything but ie. i am now gone.

 

[dorayme]

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![/QUOTE]

You have a div left that is 200px wide. You need to give the
content to its right a margin to sit in. You do this (as jo jo
says) by a margin-left. Just don't make trouble and put in
anything like pics that are two big for the divs concerned (in
either div). Remember your example is of a couple of bits of
content within a mere 500, the left is 200 and the right is 300.

If you want a 200 to the left of a browser window with no
restriction of a wrapper, you can float a div to the left and
give the content div a margin of 200px and maybe a bit more or
less (for various reasons). You do not have to float this second
div. It will take up the rest of the space (divs being naturally
100% wide) unless you choose otherwise.

You seem to be conflating two situations. One of all going on in
a 500 div, the other in a browser window that can be resized.

 

[Snef]

<div style="position: absolute; width: 200px; background-color:
#eeeeee;">vodka</div>
<div style="position: absolute; margin-left:200px; background-color:
#dddddd;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut gravida. Donec
nec tellus eu magna malesuada facilisis.
Suspendisse adipiscing nisl sit amet metus. Praesent rhoncus ullamcorper
velit. Nam tortor. Maecenas volutpat commodo urna.
Etiam ornare erat at enim. Cras a velit.</div>



ah well works in everything but ie. i am now gone.

I hope your head is allright after the wodka

This is not what i meant. I know I can use a left margin and all but that was
not the question.

The enclosing div is just for test purposes. In the website there is a content
div like the enclosing one.

I was searching for some automatic stretching of the second div. When div1 is
there, it would fill the leftover space, when div is hidden, the second div will
stretch up.
Nevermind, it seems not to be done in css only, i'll use js (already done that,
but i was wondering about a solution purely in css).
Thnx

 

[Snef]

why would the first div be empty?

The first div can be empty in my situation. The content (news items) are loaded
through ajax and the div is [display:hidden] when no content is available.
Never mind, i already have a ajax/js solution i was just searchin a way to solve
it in pure css only

Thnx.

 

[Snef]

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!

You have a div left that is 200px wide. You need to give the
content to its right a margin to sit in. You do this (as jo jo
says) by a margin-left. Just don't make trouble and put in
anything like pics that are two big for the divs concerned (in
either div). Remember your example is of a couple of bits of
content within a mere 500, the left is 200 and the right is 300.

If you want a 200 to the left of a browser window with no
restriction of a wrapper, you can float a div to the left and
give the content div a margin of 200px and maybe a bit more or
less (for various reasons). You do not have to float this second
div. It will take up the rest of the space (divs being naturally
100% wide) unless you choose otherwise.

You seem to be conflating two situations. One of all going on in
a 500 div, the other in a browser window that can be resized.
[/QUOTE]
no no no

Not what I had in mind! I know about the margins, the left, absolute positioning
and all but that was not the question.
I wanted the div2 to be dynamicly. When Div1 is hidden, div2 would stretch up to
the available width.
The content in div1 is loaded through ajax. I will handle it in there and use
some javascript.

 

[dorayme]

You seem to be conflating two situations. One of all going on in
a 500 div, the other in a browser window that can be resized.

no no no

Not what I had in mind! I know about the margins, the left, absolute
positioning
and all but that was not the question.
I wanted the div2 to be dynamicly. When Div1 is hidden, div2 would stretch up
to
the available width.
The content in div1 is loaded through ajax. I will handle it in there and use
some javascript.[/QUOTE]

OK... good luck anyway...

 

[jojo]

dorayme wrote:

You do this (as jo jo says) by a margin-left.

As far as I can remember you are very sensitive about your *small* d at
the beginning of your name. Now I want to point out that I do not have
(and I never had) a space in the middle of my name...
Thank you, jojo

 

[jojo]

You do this (as jo jo says) by a margin-left.

As far as I can remember you are very sensitive about your *small* d at
the beginning of your name. Now I want to point out that I do not have
(and I never had) a space in the middle of my name...
Thank you, jojo

Oops... what happened to the quote? It should of course be:

My appologies.