fcs fcs - 1 month ago 5x
CSS Question

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

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

alt text


<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;

<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>

<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>


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


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;