homepage Welcome to WebmasterWorld Guest from 54.234.225.23
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
how to set auto height nested divs
auto height nested divs
kingshuk dutta




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

Hi,
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.

 

swa66




msg:3840185
 10:31 am on Feb 2, 2009 (gmt 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)

simonuk




msg:3840199
 10:51 am on Feb 2, 2009 (gmt 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 :-)

kingshuk dutta




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

THANK YOU VERY MUCH FOR THE REPLY!

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..

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved