Topic: Layer Heights (Page 1 of 1)

Hi. I've got this large DIV layer which has smaller DIV layers in it. My smaller DIV's have no set height because they are dynamic. Text will constantly be removed and added, thus allowing no fixed height. However, this larger DIV layer does not seem to realize this and keeps setting its height to zero. Since I have no fixed height, I tried using height:auto;, but I got the same results--the larger DIV layer's height was still zero.
Is there any workaround for this so that the height of the larger DIV will be based on the amount of content present in it? Thanks!

Actually, if you don't specify another height, the <div> should automatically be as high as its contents. So... hmm.

I think seeing it live might help. Could you upload an example page somewhere and post the link?

ok, i got it up http://www.peehee.com/index.html <---that's the page http://www.peehee.com/css/general.css http://www.peehee.com/css/home.css <---there are 2 css files in there, #content in general.css is the stubbor layer that wont expand http://www.peehee.com/scripts/news.js <---i have a javascript in there, but i doubt it has anything to do with this issue

Sorry, the coding's kinda messy.
What I want is the dashed border of the DIV called "content" to be as tall as the content that's in it. However, the dashed line is only a mere dashed line at the top with a height of zero. Yet, when the height is set to something specific, then it works.
Thanks for takin the time.



[This message has been edited by eSoTIX (edited 12-01-2002).]

The problem might be that you're using absolute positioning for that #content <div>. Do you really need to have it positioned that way? I mean, it's just there to make a centered box around the whole page, isn't it?

You should be able to use another CSS centering method instead, like the BlueRobot one:
http://bluerobot.com/web/css/center1.html

Just give that a try.

Hey, thanks a lot. It worked. I was just wondering if you could tell me why it works though..? Why does using absolute positioning cause this to happen?

Glad it worked

Basically, absolute positioning removes the <div> you apply it to from the flow of the other elements... or to quote from W3.org:

quote:

---

9.6 Absolute positioning

In the absolute positioning model, a box is explicitly offset with respect to its containing block. It is removed from the normal flow entirely (it has no impact on later siblings). An absolutely positioned box establishes a new containing block for normal flow children and positioned descendants. However, the contents of an absolutely positioned element do not flow around any other boxes. They may or may not obscure the contents of another box, depending on the stack levels of the overlapping boxes.

References in this specification to an absolutely positioned element (or its box) imply that the element's 'position' property has the value 'absolute' or 'fixed'.

---