Problems with float in nested divs

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

Gnolen <hendrikgnolen (AT) hotmail (DOT) 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 <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

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 <hendrikgnolen (AT) hotmail (DOT) 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

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;}

"Richard" <Anonymous (AT) 127 (DOT) 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 <steve (AT) pugh (DOT) net> <http://steve.pugh.net/>

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" <Anonymous (AT) 127 (DOT) 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

In article <fhbu21lgkurkvqijg25a3bunhoumplo9l8 (AT) 4ax (DOT) com>, Steve Pugh writes:

Gnolen <hendrikgnolen (AT) hotmail (DOT) 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.