I don't know if this is possible, but it would be nice to know. I would like to have an outer div expand when a div inside it expands. Here is the catch. The inner div must be absolutely positioned. Is it possible? Here is some test code that I wrote up. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style type="text/css"> * { margin:0; padding:0; } #mainContainer { position:relative; border:solid red 3px; top:10px; left:10px; width:400px; height:auto; } #innerContainer { position:absolute; top:5px; right:0px; height:100px; border:solid green 2px; height:auto; width: 200px; } </style> <title>Test Page</title> </head> <body> <div id="mainContainer"> <div id="innerContainer"> <p>text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text </p> <p>text text text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text texttext text text text text text text text text text text text text text text text text text text text text text </p> </div> </div> </body> </html> Code (markup):
First, which way do you want to expand, height or width? Second, why does it have to be absolutely positioned? You can also set left or right, top or bottom co-ords with position: relative too, it's just that with Po-rel you get to stay in the document flow. Right now, the Abs-po can't influence the outer container at all. The two never see each other, except that the outer is a reference mark for the inner.
The height needs to expand. Position:relative throws everything else off. I was pretty sure that using absolute positioning wouldn't expand the outer div. I basically have a 3 column design, you can check out the site here: www pool-zone com. I designed the site, then management said that they wanted to have the right side bar expand height wise depending on what is in the shopping cart (not added to the site yet), but when the right side bar expands too much, it overlaps the footer. Most of the time, this won't be an issue because the center column (which pushes the footer down) will be much longer than the right column. Any other ideas?
If the sidebar is supposed to be always the same length as the main content, then a faux column with overflow:hidden on the wrap will at least keep the two together. <div id="wrapper"> <div id="sidebar"> </div> <div id="maincontent"> </div> </div> You could also not use a faux column but simply give a background colour to the sidebar, and still with overflow:hidden on the wrapper it should be able to push the footer down. Overflow hidden is this weird trick that wraps (contains) floats.