Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

how to set auto height nested divs

auto height nested divs

8:12 am on Feb 2, 2009 (gmt 0)

New User

5+ Year Member

joined:Jan 31, 2009
posts: 5
votes: 0

I want to have a layout in css with fixed width, but auto height with multiple nested divs inside it.It goes like this...#wrapper(fixed width,auto height) to wrap all nested divs,and positioned center of the browser.

Inside #wrapper three main divs...
1.#header(fixed width,fixed height)
2.#content(fixed width,auto height)
3.#footer(fixed width,fixed height)

inside #content two nested divs
1.#left_menu(fixed width,auto height)
2.#r_box(fixed width,auto height).

#r_box should have multiple nested divs inside of it,and should stretch out along with its parent div (i.e #content) to accomodate the lenght of longest nested divs.

The problem is..whenever I use absolute position for nested divs inside #r_box,its overlaps #footer and also its parent divs(#r_box) does not stretch to fit.

is there any way that i use "absolute position" for child divs of #r_box, and #r_box stretches to accomodate it.

any help ?Thanks in advance.

10:31 am on Feb 2, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 7, 2003
votes: 0

height:auto is actually the default. Take care what auto height means according to the CSS standards.

But I guess we understand more or less what you seek.

With absolute positioning you are basically putting a box in a position in relation to either
- the closest parent that has position (from e.g. either position:absolute or position: relative)
- the viewport in the absence of a parent with position

You can position both the bottom and the top on an element with absolute positioning and the browser then should stretch the element to fit that space.
But if that element now will not grow or shrink based on it's content, it'll overflow.

Overflow can be controlled by e.g. overflow:scroll which will create a scrollbar on the element (not on the page).

Just as with floats (which most out here are more familiar with), you can;t simply and straightforward have something that makes 2 columns and stretches them so both are as long as the longest of the two.

The easiest is to fake it: have them stretch the parent to the length of the longest and use a graphical background on the parent instead of on the children themselves.

But absolute positioning is quite useful to achieve some effects, just be careful with how you nest elements, where you create scrollbars and remember that e.g. IE6 will need substantial scripted help to cope with it (IE7.js teaches IE6 enough to get along with most what you can come up wth)

10:51 am on Feb 2, 2009 (gmt 0)

Preferred Member

10+ Year Member

joined:Dec 9, 2003
votes: 0

Position absolute is easier to use when you have no flowing elements below it (like a footer) or the ancestor elements are also positioned in some way.

In your example I would take great care as it sounds like you are trying to have content broken out of the ancestor elements but still have some control over them within the ancestor elements. You will be limiting the flow and layout of the page considerably going down this route.

Position absolutes are useful for content which isn't following the path of the flow (like a logo in a header or to position an image behind some text) but I wouldn't want to start trying to absolute positioning divs deep inside other elements like you are suggesting :-)

5:05 pm on Feb 2, 2009 (gmt 0)

New User

5+ Year Member

joined:Jan 31, 2009
votes: 0


As I understood absolute position is great when we have an element with fixed widht and height.Otherwise "html flow" is the key thing! right?

once again thank you very much..