Problems with float in nested divs

[Gnolen]

Hi,

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

How come?

HTML
<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

CSS

#ads {width: 510px; height: auto;}

#ads_left { float: left; width: 240px;}

#ads_right { float: right; width: 240px;}

Thanks for any help I could get!

/ Gnolen

[Steve Pugh]

Gnolen <he***********@hotmail.com> wrote:

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

#ads {width: 510px; height: auto;}
#ads_left { float: left; width: 240px;}
#ads_right { float: right; width: 240px;}

Floated elements are taken out of the doument flow and hence do not
contribute to the height of their parent. Hence 'ads' has no content
and thus no height. You need an element after 'ads_right' and before
the end of 'ads' with clear: both; set.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Gnolen]

Thanks Steve!

Yeah, this was the problem. After searching the net for clear: both; I
found this code from
http://www.positioniseverything.net/easyclearing.html which I used on
'ads'-div:

..clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

..clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
..clearfix {display: block;}
/* End hide from IE-mac */

Thanks, it works great now!

/ Gnolen
Steve Pugh wrote:

Gnolen <he***********@hotmail.com> wrote:

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

#ads {width: 510px; height: auto;}
#ads_left { float: left; width: 240px;}
#ads_right { float: right; width: 240px;}

Floated elements are taken out of the doument flow and hence do not
contribute to the height of their parent. Hence 'ads' has no content
and thus no height. You need an element after 'ads_right' and before
the end of 'ads' with clear: both; set.

Steve

[Richard]

On Wed, 09 Mar 2005 16:53:52 GMT Gnolen wrote:

Hi,

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

How come?

HTML
<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

CSS

#ads {width: 510px; height: auto;}

#ads_left { float: left; width: 240px;}

#ads_right { float: right; width: 240px;}

Thanks for any help I could get!

/ Gnolen

You should set the ads division to a known height since that is the parent
and you know it will have content.
As long as it is not in another container, it should expand as needed.
I'd start off with the height of what ever image it is you're going to use
initially.

#ads {width:800px; height:100px;}

[Gnolen]

Thanks Richard,

But I need it to expand with the changeable content in it. And it will
be in a nested div that have to expend with it to.

But the above fix fixed the problem.

/ Gnolen

Richard wrote:

On Wed, 09 Mar 2005 16:53:52 GMT Gnolen wrote:

Hi,

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

How come?

HTML
<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

CSS

#ads {width: 510px; height: auto;}

#ads_left { float: left; width: 240px;}

#ads_right { float: right; width: 240px;}

Thanks for any help I could get!

/ Gnolen

You should set the ads division to a known height since that is the parent
and you know it will have content.
As long as it is not in another container, it should expand as needed.
I'd start off with the height of what ever image it is you're going to use
initially.

#ads {width:800px; height:100px;}

[Steve Pugh]

"Richard" <An*******@127.001> wrote:

On Wed, 09 Mar 2005 16:53:52 GMT Gnolen wrote:

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

#ads {width: 510px; height: auto;}
#ads_left { float: left; width: 240px;}
#ads_right { float: right; width: 240px;}
You should set the ads division to a known height since that is the parent
and you know it will have content.

Technically it doesn't have any content in CSS terms for the reason
given in my post. And unless all the contents of the two floated divs
are images you have no way of knowing how much height will be needed,
As long as it is not in another container, it should expand as needed.
No it won't. See my post for the reason why.
I'd start off with the height of what ever image it is you're going to use
initially.

Are you assuming that just because the divs are labelled as being
'ads' that they will contain nothing but images?

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>

[Gnolen]

ads_left will contain text(news) and ads_right will contain images.

Is it correct what I did do you think? Works alright thought and that is
what matters I think.

Thanks,

Gnolen

Steve Pugh wrote:

"Richard" <An*******@127.001> wrote:

On Wed, 09 Mar 2005 16:53:52 GMT Gnolen wrote:

I have a problem with float in firefox/mozilla, the 'ads'-div doesn't
resize on the height with the 'ads_left' and 'ads_right'. In IE there is
no problem but in FF there is. The 'ads'-div do not resize at all.

<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

#ads {width: 510px; height: auto;}
#ads_left { float: left; width: 240px;}
#ads_right { float: right; width: 240px;}

You should set the ads division to a known height since that is the parent
and you know it will have content.

Technically it doesn't have any content in CSS terms for the reason
given in my post. And unless all the contents of the two floated divs
are images you have no way of knowing how much height will be needed,

As long as it is not in another container, it should expand as needed.

No it won't. See my post for the reason why.

I'd start off with the height of what ever image it is you're going to use
initially.

Are you assuming that just because the divs are labelled as being
'ads' that they will contain nothing but images?

Steve

[Michael Stemper]

In article <fh********************************@4ax.com>, Steve Pugh writes:

Gnolen <he***********@hotmail.com> wrote:

<div id="ads">
<div id="ads_left">content</div>
<div id="ads_right">content</div>
</div>

#ads {width: 510px; height: auto;}
#ads_left { float: left; width: 240px;}
#ads_right { float: right; width: 240px;}

Floated elements are taken out of the doument flow and hence do not
contribute to the height of their parent. Hence 'ads' has no content
and thus no height. You need an element after 'ads_right' and before
the end of 'ads' with clear: both; set.

Why is it that way, anyhow? I'm not disputing that it is -- I know it
is from painful experience. But, it seems to me that this violates
the block-structured paradigm. The floats were declared within the
"ads" block -- why does their scope extend outside of it?

Was there some good reason for the behavior to be defined this way, or
was it just an unintended consequence of some other decision?

The nasty side-effect of this is, of course, that in situations like
this one does need to add a content-free element to end the floating,
which goes and ties presentation back into the HTML.

--
Michael F. Stemper
#include <Standard_Disclaimer>
This sentence no verb.