Need generic div css that does not overlap (like a table)

Question

I'm trying to use divs instead of tables to style boxes around my content. The content can be any size and needs to allow the browser to be resized to any degree. Need the background color and border to contain the content. This works fine with tables. How do I get a div to work the same way?

Note: I added "_"s because my non-breaking spaces were getting lost.

Sample Page

Sample image

_{(source: c3o.com)}

Content:

<style type="text/css">
    div.box, table.box
    {
        padding: 10px 1000px 10px 10px;
    }

    div.box-header, td.box-header
    {
        border:  solid  1px  #BBBBBB ;
        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    }   

    div.box-body, td.box-body
    {
        padding: 6px;
        border:  solid  1px  #BBBBBB ;
        border-top: none;
    }
</style>


<div class="box">
    <div class="box-header">please_help_make_these_divs_stop_overlapping</div>
    <div class="box-body">please_help_make_these_divs_stop_overlapping</div>
</div>

<table class="box" width="100%" cellpadding="0" cellspacing="0">
    <tr><td class="box-header">tables_make_good_containers_tables_make_good</td></tr>
    <tr><td class="box-body">tables_make_good_containers_tables_make_good</td></tr>
</table>

Answer 1

There is no easy way to do this that is crossbrowser friendly that I know of.

At least in firefox you can create an simulated table by setting divs with

display:table;
display:table-row;
display:table-cell;

So that those divs work like table elements. Then the box will contain it's content. Wether that's a good solution or not is debateable.

I've been having similar issues with page layouts myself. Usually I've solved those by setting min-width and overflow:auto;