2 expanding divs?

[Huscy]

OKie, i'll explain the goal first, I wish to have dynamically generated content in a <div> which, obviously being dynamic doesnt have a fixed height, so this will have to expand, easy right... BUT on my design I have another <div> BEHIND the main one, with a pattern on (as css doesnt support images as borders yet), heres my code so far:

/* LIST SECTION */
.list_container {
background-image: url(images/bg_diag.gif);
width: 660px;
z-index: 2;
position: absolute;
top: 75px;
left: 5px;
border: 0px solid black;
}

.list_body {
background-color: #FFFFFF;
font-size: 9px;
width: 642px;
z-index: 3;
position: absolute;
top: 4px;
left: 4px;
border: 0px solid black;
padding: 10px;
}

ignore the borders, i just include them so i can see whats happening, heres my (x)html code..

<div class="list_container">
<div class="list_body">
content goes here...
</div>
</div>


now I need the list_container div to expand with the list_body div, how would i do this anyone??

[BenANFA]

The problem with using absolute positioning is that you take the position element out of the normal flow of the document. This makes resizing complex (I think). If you remove the absolute positioning from both divs and use the margin attribute to position them then I think that when you resize the content in the inner div, the outer one will resize automatically.

Also not that on you .list_body style you 10px padding combined with setting the width will produce inconsisten results across broswers (content width 622px in IE5.x 642px in everything else). Again you may find it better to remove the width and se how much border you wish to see using the margin attribute.

/* LIST SECTION */
.list_container {
  background-image: url(images/bg_diag.gif);
  width: 660px;
  z-index: 2;
  margin: 75px 0px 0px 5px;
  border: 0px solid black;
}

.list_body {
  background-color: #FFFFFF;
  font-size: 9px;
  z-index: 3;
  margin: 4px;
  border: 0px solid black;
  padding: 10px;
}