Forum Moderators: not2easy
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.
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)
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 :-)
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..
