Topic: height of a DIV nesting some other DIVs

People hi'
I'm working on a re-design, and have a problem to make a DIV taking the height of its higher children DIVs. I've isolated the problem in that test page but don't see how to solve it At my great surprise it works well in IE 5.01+ but not in Gecko based browsers.

Thanks in advance.

Mathieu "POÏ" HENRI

I got that same proble too. My solution was set 'overflow: auto;'

Does not make that much sense for me, but thats how i got it to work.

__________________________________


Alevice's Media Library

Alevice: Thank you so much! I was going along the 3 cols float methods but wasn't quite satisfied with it.
I'm puzzled 'coz I had already seen the overflow:auto; trick before.

Mathieu "POÏ" HENRI

^^

__________________________________


Alevice's Media Library

This happens as a result of the float. In this context, it may not make sense, but in the intended use of floats (things like a photograph floated in a paragraph of text...) it makes perfect sense.

All you need to do is, after the third column div, add a <br class="clear"/>

and in your CSS define this for the class of "clear":

.clear {
clear:both;
}

The clear:both; breaks the float of the preceding divs, and the container will then expand to encompass all of them.

Or you can simply define clear:both; in your CSS for the 'fourth header', but I prefer to make a class that you can throw in anywhere.


{{edit -

discussion of the same issue at the GN: http://development.gurusnetwork.com/discussion/thread/2220/
}}


[This message has been edited by DL-44 (edited 11-14-2003).]

DL-44: Thank you for info and the URL. Though the BR solution sounds technically normal I'm a little reluctant to use it 'coz there's no reason to "corrupt" the struture of my XHTML page and put a BR here when the overflow:auto is not that odd. Sorry, I do my XHTML+CSS purist with that redesign

Mathieu "POÏ" HENRI

How is omitting a br tag that fixes your problem being a purist?

As I see it there's nothing wrong with the tag. It will validate for both XHTML and CSS. The way I see it you're just being difficult.

:::11oh1:::

krets: Omitting a *structuraly useless* BR tag is being a purist. And yes, I admit to be quite picky here.

Mathieu "POÏ" HENRI

If you're concerned about being a "purist" then your logic is flawed.

Overflow:auto; doesn't make sense in this case.

Add the "clear" class to your CSS, and apply it to the 'fourth header" tag if you want to be more semantically correct. The BR is not incorrect though, it is simply extraneous.

Sorry I didn't mentionned that my main goal was to see the background of the nesting DIV.

DL-44: I've updated the test page with a clear:both but in Gecko browsers the "threeColumns" DIV ( and especially its ( pink ) background ) is not extended to the height of the biggest nested element contrary to the overflow:auto method.

I may be wrong, but overflow:auto and clear:both both makes sense.

It turns out that my concern was about layout and that I wanted to keep the structure as is. The overflow:auto seems to solve my problem and meet my requirement while the clear:both meet my requirement but solve just a part of my problem.

Sorry, for my lack of precision in my previous posts.

Mathieu "POÏ" HENRI
[edit] ATM I can't connet to my FTP to upload the updated page [/edit]

[This message has been edited by poi (edited 11-14-2003).]

Try adding clear:both to #lastDiv.

That makes some progress for me.

EDIT: OK, I got it to work in Firebird by adding a valid doctype to it and also adding overflow: auto to the #threecolumns div.
http://www.11o1h.net/test/3columns.htm

:::11oh1:::

[This message has been edited by krets (edited 11-14-2003).]

krets: As I said above, the clear:both cleans the 3 columns layout but it does NOT reveal the background of the nesting DIV even with a valid doctype.

Well to clear up the things, if you hadn't noticed in the Site reviews! topic, I'm re-designing a site ( click on the logo to see another page ) and wanted to have a 3 columns sub-layout with a border between the columns. Due to the different box models, it'd have been a nightmare to do it with CSS borders so I've decided to do them with a background image in the "threeColumns" DIV hence my question.

Mathieu "POÏ" HENRI

Looking at your code in the page you posted, you don't have the clear:both; anywhere in there.

The element with the clear:both; needs to be inside the same container as the flaoted elements.

I still don't fully understand the overflow:auto; use in this case....it doesn't make sense to me.
If height is auto (the default), there is technically nothing to overflow.

BTW, with the clear:both inplace, you don't need the min-height - http://in-dented.com/temp/3columns.htm

DL-44: I understand the techniques of the <br style="clear:both;"/> and the <div id="lastDiv" style="clear:both"> and their differences.

You're right about height:auto, Gecko browsers doen't seem to take into account the height of nested floated elements and consider that they overflow their container hence the my use of the overflow:auto method along the fact that it doesnt require an extra BR tag which would have no other purpose but to fix a layout problem.

I used a min-height to see a little bit of the pink background in Gecko browsers and show BTW that there was something wrong. Obviously the min-height attribute is useless here.

Cheers,

Mathieu "POÏ" HENRI

quote:

---

along the fact that it doesnt require an extra BR tag which would have no other purpose but to fix a layout problem.

---

I understand that, but it does really have a prupose - it's a line break. Is it necessary outside of fixing thelayout? No. But it is not incorrect for gecko browsers to work this way - it's how they should work really.

But here's what I have a problem with -

You claim to be a "purist" and so don't want to use the <br/> tag - which you see as "useless".

But, you have no qualms using totally useless CSS for no purpose other than "fixing" the layout?

How is that any better? How is that any more "pure"?

The <br/> is a structurally sound and semantically acceptable tag in this use, and in that location, whereas the overflow:auto; is purely a hack...



[This message has been edited by DL-44 (edited 11-15-2003).]

quote:

---

You claim to be a "purist" and so don't want to use the <br/> tag - which you see as "useless".

But, you have no qualms using totally useless CSS for no purpose other than "fixing" the layout?

---

CSS is the descriptive language for stylization and layout, thus it seems far more appropriate to me to fix the layout via CSS rather than via adding a BR tag. As to the hack, I already have some CSS hacks ( for the sake of browsers standards compliance ) and don't want to polute another part of my pages by adding a tag having a layout purpose in the XHTML code.

Now, to end up that deaf talk, please, everybody look in my direction :
* Flash thingy *

Well, BR is BAD. BR kidnaps your children. BR is not your friend.

Mathieu "POÏ" HENRI

apples and oranges I suppose...

But it's silly to say that you won't use one method because you're a "purist" but then use hacks in other areas. =)



[This message has been edited by DL-44 (edited 11-15-2003).]