DIV sizing queries

[rsart]

Morning folks.

I have a query, something that is annoying me about divs and tables :)

Firstly, I will explain how I have got the effect workng as I want it on part my site.

On my site I have made my sidebars have curved bottoms. The side borders are fixed at 160 pixels or so, and the curved bottom work fine. Here is a cut down HTML snippet:

<div id="sidemenu">
<div class="tlrborder">
<h2>Analyse</h2>
<br />
<ul>
<li><a href="#">Reports</a></li>
<li><a href="#">Charts</a></li>
<li><a href="#">Advice</a></li>
</ul>

<br />
</div><!-- end the tlrborder div menu -->

<div class="curvedbottom">
<img src="/sitegfx/backgrounds/sideborderbottomright.gif" alt="Curved edge" width="8" height="7" border="0" />
</div> <!-- end curved bottom div -->
</div> <!-- end the side menu -->

Ignoring the H2 and list formatting, here is the CSS for that:

#sidemenu{
float: left;
margin: 0px;
padding: 0px;
border:0px;
clear: both;
width: 170px;
background-color:#FFe9cc;
}

.tlrborder {
border: 1px solid #336600;
border-bottom:0;
}

.curvedbottom{
padding: 0px;
padding-bottom: 10px;
background-color:#ffffff;
background-image:url(/sitegfx/backgrounds/sideborderbottom.gif);
background-repeat:no-repeat;
text-align:right;
margin-right:0;
}

.curvedbottom img{
float:right;
}

Ok, so its obvious how that works. I create a sidebar that is 170 pixels wide, inside that I create another div with a green border at the top and both sides. underneat that I have by curved bottom, which has a background image with a curve at the left side. It floats a small graphic showing the right curve to the right of that div.

As I have said, that works just as it should.

Now, the query part.

In the main window I want to have some tables (they are tables of results). I want them to have the same effect.

Since the tables can be different sizes, I dont want to specify a div width like I did with the sidebar, I just want the div to autoresize around the table.

I would create a containter, put the table inside it, then put the curvedbottom div inside that, then close the container.

However, the containter ALWAYS stretches to the full width of the parent div. I have hacked a result by placing the table insdie another table, but this just feels like an ugly hack.

Any ideas? Here is my current HTML and CSS:

<div class="container">
<p>test text</p>

<div class="curvedbottom">
<img src="/sitegfx/backgrounds/sideborderbottomright.gif" alt="Curved edge" width="8" height="7" border="0" />
</div>
</div>

.container {
margin: 0 auto;
padding: 0px;
border: 0px;
text-align: center;
background-color:#FFffff;
background-color:#FFff00;
}

[DrDoc]

I just want the div to autoresize around the table.
...
However, the containter ALWAYS stretches to the full width of the parent div.

You need to remove the block level "features" from the div. You can do this by either specifying display:inline or float:left for the div.

[rsart]

I was just thinking "Would changing the continer to an inline style work?"

And there we have an answer.

I'll try both tonight, thank you

[rsart]

Hmm. If I dont have the curvebottom style there, it works fine. However, once I put the curvebottom in, it still spans the entire page width. I suspect that is because the curvebottom is floating its image to the right.

What I might try is using curve bottom the other way round - make the background image run from right to left, and float my corner to the left.

[rsart]

Ok, I switched the curved bottom graphics, and it make no difference. its probably better to use thoguh.

However, the answers didnt help.

When I use display: inline; I get no change. The div still fills the entire width of the parent div, instead of just using the width needed to display the contents.

When I use float: left, the container did DOES only use the amount of space I need, but it is not centered in the page, which I require.

Any other ideas before I resort to tables?