5 replies [Last post]
Keith W
Offline
newbie
Cedar Rapids, IA USA
Last seen: 16 years 42 weeks ago
Cedar Rapids, IA USA
Timezone: GMT-5
Joined: 2004-07-22
Posts: 8
Points: 0

I'm a newbie, so will post here. I hope I do not wear out the Forum with my questions!
I have had one success, however: http://ls4.us/classreunion1.html

Now I'm trying to do another page, with elements within elements (boxes) about 3 deep. I'm using div and id, no class.

Problem:
The inner box (auto; visible) will expand to fit the text put into it.
But the outer box (also auto; visible, and lots of others I've tried) won't expand to fit the growing inner box.
The outer box WILL expand to fit additional inner boxes, or text placed within the outer box ---- but I can not make it expand with the inner box as it expands.

I will be grateful for any help which can be provided.

Keith

mnesiac
Offline
newbie
Last seen: 16 years 42 weeks ago
Joined: 2004-07-23
Posts: 1
Points: 0

Try this...

I was having the same problem, strangely enough in everthing but IE., and this seemed to take care of it.

For your #container rule spec - height : auto;

For your #content rule spec - height : 100%;

Hope this helps. Like I said, it seemed to take care of the
problem for me.

Matt

Keith W
Offline
newbie
Cedar Rapids, IA USA
Last seen: 16 years 42 weeks ago
Cedar Rapids, IA USA
Timezone: GMT-5
Joined: 2004-07-22
Posts: 8
Points: 0

Container "box" doesn't expand with inner box

Thanks, mnesiac, for the suggestion, but it didn't change anything on my browsers. Both IE and Firefox work the same.

Tell me: with multiple nested boxes, and adding text to the inner-most one until it expands downward to hold all the text, should one be able to code so all other boxes expand downward as needed to show all the text in the inner box?

I think they should, and that is what I'm trying to do.

Ideas, folks?

Keith

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Container "box" doesn't expand with inner box

Hi Keith,
Here's a suggestion for the boxes you wish to expand try removing height and using min-height which will work for most browsers other then IE . Then for IE use

/* Holley Hack \*/
* HTML #container{height:1%;}
/* end */
where #container is the id of the container.

Hope that helps

Keith W
Offline
newbie
Cedar Rapids, IA USA
Last seen: 16 years 42 weeks ago
Cedar Rapids, IA USA
Timezone: GMT-5
Joined: 2004-07-22
Posts: 8
Points: 0

Container "box" doesn't expand with inner box

That didn't help either, Tony.

But here is what my experimentation has shown:

If an inner box is relatively positioned, a box in which it is positioned will expand downward as the inner one expands with increased text.

If an the same inner box is absolutely positioned, a box in which it is positioned will not expand downward as the inner one expands with increased text.

For the life of me, I do not understand why this is the case. Can someone help me understand this, please?

Keith

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Container "box" doesn't expand with inner box

Keith,
Thats to do with the flow properties of those positioning attributes; position relative will leave the box still in the flow of the document but with the option of shifting it's position using left/top it still occupies the space set aside for it and effects the boxes around it. Position absolute on the other hand is removed from the flow of the document and is able to be placed anywhere on the page and does not have an influence on surrounding boxes; it's position is taken from parent box if set to relative otherwise it's takes it's position from the body/html

This link may help explain,

http://www.positioniseverything.net/articles/flow-pos.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me