Grow/shrink div to size of contents?

I have a 15-column table inside a div (inside other divs). When I increase the font size in the browser, the table gets bigger but the box enclosing it doesn’t, so the table eventually breaks out of the box.

I don’t seem to be able to set the width of the box to auto or it spans the entire page.

[CODE].container {
position: relative;
margin: 0 auto;
width: 800px; (can’t be auto or it snaps to edges of page)
height: auto;
}

.content_outer_table { background: #000000;; position: relative; padding: 20px; }
.content_inner_table { background: #ffffff; border: 1px solid #333333; padding: 20px; }[/CODE]

The page is simplicity itself:

[CODE]<div class=”container”>
<div class=”content_outer_table”>
<div class=”content_inner_table”><!–table goes here–></div>
</div>
</div>[/CODE]

Can I have the divs “suck in” to the size of the content, or expand (horizontally) as the content grows?

Also in #CSS _↴