[Rollo Tamasi]

Hi,
I have a div which contains a background image. Within that div i want to place a few more divs which will contain images. The problem i'm having at the moment is that when i add images to the divs, the main div does not adjust it's height to fit them in. So i have an overlapping div.

This is the css for the larger div
Code:

Code:

#Layer9 
{ position: absolute;
left: 98px; 
top: 344px; 
width: 771px;
height: 600px; 
z-index: 9;
 background-image: url(blue_layout_imgready_09.gif);
 background-repeat: repeat-x; margin: 0px; padding: 0px;

and this is a sample of the inner divs
Code:

Code:

#Layer24
 { 
position:absolute;
width:1px; 
height:auto;
 z-index:2;
 left: 460px; 
top: 236px;
 background-image: url(advert_border.gif);
}

I wouldn't be too much of an CSS expert so the problem is probably easily resolved. Thanks
Reply With Quote

[Clark_Kent]

Hi Rollo Tamasi,

As far as i know, i dont think you'll be able to autoresize divs using css only. I'm not completely clear as to why you would want the main div to autoresize, whenever positioning images using divs i always use tables to house my divs... but perhaps this site could help you out. It's got some great css examples that could help you achieve what you are trying to achieve.

Hope this helps.

- CK

[jfulton]

If you explicitly set the height or width of a div, it should not automatically resize based upon overflow. IE does do this though. Check http://www.positioniseverything.net/...ingboxbug.html.

I think your problem is that you are using background images and expecting the div to expand based upon the dimensions of the background image. That is not going to happen. The background image is not content, therefore the div will not expand to show it all. If you know the dimensions of the background image, explicitly set the size of the "container" div.

Hopefully that will point you in the right direction.