title: Need generic div css that does not overlap (like a table)
body: <p>I'm trying to use divs instead of tables to style boxes around my content.  The content can be <strong>any size</strong> and needs to allow the browser to be <strong>resized to any degree</strong>.  Need the background color and border to <strong>contain the content</strong>.  This works fine with tables.  How do I get a div to work the same way?</p>
  
  <p>Note: I added "_"s because my non-breaking spaces were getting lost.</p>
  
  <p><a href="http://www.c3o.com/divonly.htm" rel="nofollow noreferrer">Sample Page</a></p>
  
  <p><a href="http://www.c3o.com/div-like-table.JPG" rel="nofollow noreferrer">Sample image</a> </p>
  
  <p><a href="https://i.stack.imgur.com/ZdQIg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZdQIg.jpg" alt="alt text"></a><br>
  <sub>(source: <a href="http://www.c3o.com/div-like-table.JPG" rel="nofollow noreferrer">c3o.com</a>)</sub>  </p>
  
  <p>Content:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      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;
      }
  &lt;/style&gt;
  
  
  &lt;div class="box"&gt;
      &lt;div class="box-header"&gt;please_help_make_these_divs_stop_overlapping&lt;/div&gt;
      &lt;div class="box-body"&gt;please_help_make_these_divs_stop_overlapping&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;table class="box" width="100%" cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;&lt;td class="box-header"&gt;tables_make_good_containers_tables_make_good&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td class="box-body"&gt;tables_make_good_containers_tables_make_good&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>