Note that there are some explanatory texts on larger screens.

plurals
  1. PONeed generic div css that does not overlap (like a table)
    primarykey
    data
    text
    <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="http://www.c3o.com/div-like-table.JPG" rel="nofollow noreferrer">alt text http://www.c3o.com/div-like-table.JPG</a></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>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload