Hi guys I was wondering if anyone on here could give me a hand..... I would be really grateful if they could......

Here goes....

I have 3 div tags.

One is postioned relatively as a background.

The other 2 area nested inside this (relatively).

When I move the postions of the inner div tags using css the parent one does not resize (expand) to encompass them.

I want to create a background div that expands and shrinks as new content is added to the page.

Is what i am trying possible?

Many thanks ;]

Jim.

show some code.

but it sounds like you have set an explicit height on the parent container

many thanks for the help ;]

css:

#background_layer {
 background: #FFFFFF;
 position: relative;
 top: 10px;
 left: 10px;
 background-image: url(../lib/global/background_x750.jpg);
 background-repeat: no-repeat;
 background-position: left top;
 width: 750px;
 }
#top_left {
  position: relative;
  top: 0px;
  left: 0px;
}
#uttery_adventurous {
  position: relative;
  top: 0px;
  left: 10px;
}
#book_tokens {
  position: relative;
  top: 5px;
  left: 0px;
}
#top_right {
  position: relative;
  height: 200px;
  top: -180px;
  left: 497px;
}
#little_heroes {
  position: relative;
  top: 0px;
  left: 0px;
}
#find_out_more {
  position: relative;
  top: 80px;
  left: 0px;
}

html:

 
<div id="background_layer">
 
<div id="top_left">
<div id="uttery_adventurous"><a href="http://www.XXXXXXX.com"><img src="./lib/global/uttery_adventurous.gif" alt="Utterly Adeventurous!" /></a></div>
<div id="book_tokens"><a href="http://www.XXXXXXXXXX.com"><img src="./lib/global/book_tokens.gif" alt="Personalised Book offer." /></a></div>
</div>
 
<div id="top_right">
<div id="little_heroes"><img src="./lib/global/little_heroes.gif" alt="We'll make your little heroes the stars of our books." /> </div>
<div id="find_out_more"><a href="more.php?pid=<?=$_GET['pid']?>"><img src="./lib/global/find_out_more.gif" alt="Show me more about <?=$ptp[0]['productName']?>." /></a> </div>
</div> 
</div>
 

Ok guys I think i figured it out. I am by no means an expert on this so please forgive any novice mistakes....

I wrote this, hopefully it can be expanded and improved upon and hopefully it will help out someone else!



Using nested divs to acheive an expanding (height) background as new content is added.

Set your background div to relative (positioning). Position it as you please and set
its min-height (to your desired normal (unexpanded) page height in px).

Note: Any more relative divs you add to the page will be included in the height math that governs the expansion of the background div. So set all divs other than the one you wish to use to expand the page to absolute.

Make sure the div you wish to use to expand the page is the first div nested inside the background div. If it is not first the expansion will not happen. Set its
postioning to "top: 0px;". Use padding to achieve the position you wish to offset it from the top of the page. Set bottom padding to create some distance between the end of the page and the end of the div.

As you add content to this div the page should expand.

Now add the rest of your page elements using absolute positioning.

Cheers,

Jim;]

Jim the basic problem was by having all the nested divs positioned in some way they were taken out of the normal document flow and in a way weren't really inside the containing div.

You just need to have the one div you want to control the overall expansion to remain in the document flow so no positioning. You want to control where it is in the layout with a margin or a padding like you did. It shouldn't matter where in the order it comes though.

Sounds like you got it all worked out, but hopefully I explained a little about why it was happening.

It's definitely not necessary to position every single div, it's better that you don't. Position your main 'wrapper' as relative and leave the ones inside it alone to flow normally.

ok guys so ill try doing the whole technique with padding. thanks for the comments ;]

cheers,

Jim;]