Expandable divs

[electrickeye]

I'm trying to create a div that will size its self to fit the content in it. But I'm not making it a square div, it's going to have rounded edges. So I'm thinking I need to make 3 divs, the middle one being square, and being the one that can expand. then there would be one on top and one on bottom that would give the illusion of a singe, round-edged container. The only problem is that I can't figure out how to position the two divs to make them flush with the middle one. Any ideas? how do most designers do expanding divs like this?

[Wickham]

Divs normally go onto a new line, so if you code three divs, they should be on top of one another. Make sure they have no top or bottom margins or padding.

<div id="top">&nbsp;</div>
<div id="middle"><p>Content here</p></div>
<div id="bottom">&nbsp;</div>

CSS something like:-
#top, #middle, #bottom { margin: 0; padding: 0; }
#top { background-image: url(top.jpg); width: ??px; height: ??px; }
#middle { width: ??px; }
#bottom { background-image: url(bottom.jpg); width: ??px; height: ??px; }

This assumes that the top.jpg and bottom.jpg have a fixed width and rounded corners (one is normally the other saved upside down).

Quite often a containing div is created around all three divs so that the containing div can be accurately positioned and hold together the inner divs.