Need generic div css that does not overlap (like a 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;

Answer 2

One way is to make your boxes floats. Add float:left; to box, box-header, and box-body. Add clear:both; to box-body to force it below box-header. You'll probably need to add clear property to whatever content follows as well.

You will not get right edges of box-header and box-body to align, though. If you want their widths to be the same, you really want a table. Table is a tool to make all cells in the same column to share the widths.

For other ideas, check out this SO question.

Answer 3

This works (actually holds together better than tables in ie7 too)

div.box{
  float:left;
  width:auto;
  margin: 10px 1000px 10px 10px;
}

div.box-header{
  float:left;
  width:100%;
  border:  solid  1px  #BBBBBB ;
  font-size: larger;
  padding: 4px; 
  background-color: #DDDDDD;
}

div.box-body{
  clear:left;
  float:left;
  width:100%; 
  padding: 4px; 
  border:  solid  1px  #BBBBBB ; 
  border-top: none;
}

NOTE: both boxes have to have same left and right padding or one juts out a bit.

Answer 4

Firstly, you should be using semantic markup. If something is a header and content mark it up as such with header and paragraph tags. That will help you move out of the 'table-way' of thinking were you try to emulate your markup and styles like a table, markup should come first, CSS can come after.

The following should do what you want:

<style type="text/css">
    * {
    margin:0px;
    padding:0px;
    }
.box {
border: solid 1px #BBBBBB;
margin:10px;
}
.box h3 {
padding: 4px;
border-bottom: solid 1px #BBBBBB;
background-color: #DDDDDD;
}
.box p {
padding: 6px;
}
</style>

<div class='box'>
    <h3>please help make these divs stop overlapping</h3>
    <p>please help make these divs stop overlapping</p>
</div>

Thinking about markup and style separately is the path to CSS Zen Mastery :o)

Answer 5

Floats are not needed, but you seem to be confusing the uses of margin vs. padding. The following minor tweaks to your style works as you need it to:

<style type="text/css">
    div.box, table.box
    {
        margin: 10px 1000px 10px 10px;
        border:  solid  1px  #BBBBBB ;
       padding: 0px;
    }

    div.box-header, td.box-header
    {

        font-size: larger;
        padding: 4px;
        background-color: #DDDDDD;
    border-bottom:  solid  1px  #BBBBBB ;

    }   

    .box-body, td.box-body
    {
        padding: 6px;
    }
</style>

I've changed the padding on the box to a margin, moved the border to your box, and added an underline to the header.

Answer 6

If you really don't want to use a table you can do this:

div.box div {
  overflow: hidden;
  zoom: 1; /* trigger haslayout for ie */
}

Next time this kind of problem comes up go to giveupandusetables.com.