I am building an interface that includes labels on top with rounded corners on top and a background image. Currently I have a table based method that is effective but not ideal. If anyone has any thoughts on how to do this with a div or divs I would appreciate it.

The code looks like this:

.container_description {
background-image: url(images/container_head_bck.gif);
background-repeat: no-repeat;
background-position: right;
background-color: #d6e0d2;
font-weight: bold;
padding: 0;
margin: 8px 6px 0 6px;
width: 50%;
height: 24px;
border: 0;
}

.container_left_cap {
background-image: url(images/container_head_cap.gif);
background-repeat: no-repeat;
background-position: left;
padding: 0;
border: 0;
}

.container_description td {
padding: 0 6px 0 5px;
border: 0;
}

<table cellpadding="0" cellspacing="0" class="container_description">
<tr class="container_left_cap"><td>
Children
</td></tr>
</table>

Example is here:

http://ljonn.com/misc/css-screen-html-latest/test.html

This item will sit on top of containers of varying widths, by the way.

Any ideas?

I thought that's exactly what I already tried, but apparently I didn't because your method works whereas mine did not.

Anyway, thanks John. Very helpful.

Actually I didn't post what I tried, but I take your point.