CODEWITHSUNDEEP
htmlcss
Andrew Burns
Andrew Burns

Reputation: 14529

Why doesn't this DIV expand to the width of the children

I am having an issue and wondering why my containing DIV does not expand to the width of the big table?

<html>
   <head>
      <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/screen.css" type="text/css" media="screen, projection" />
      <link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/print.css" type="text/css" media="print" />
      <!--[if lt IE 8]><link rel="stylesheet" href="http://www.blueprintcss.org/blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->
      <style type="text/css">
         div.add-padding {
            padding: 15px;
            background-color: red;
         }
         table {
            background-color: blue;
         }
      </style>
   </head>
   <body>
      <div class="add-padding">
         <table>
            <thead>
               <tr><td>FOO</td></tr>
            </thead>
            <tbody>
               <tr><td>BAR</td></tr>
            </tbody>
         </table>
         <table>
            <thead>
               <tr>
                  <td>SEQ</td>
                  <td>ID</td>
                  <td>ParentID</td>
                  <td>Case Category</td>
                  <td>Case #</td>
                  <td>Case ID</td>
                  <td>Account Code</td>
                  <td>Account Code ID</td>
                  <td>Trans Date</td>
                  <td>Person ID</td>
                  <td>FullName</td>
                  <td>Suffix</td>
                  <td>PayeeID</td>
                  <td>OperatorID</td>
                  <td>Notes</td>
                  <td>CheckID</td>
                  <td>ReceiptID</td>
                  <td>Void</td>
                  <td>TransCategoryID</td>
                  <td>CaseFull</td>
                  <td>TransTypeID</td>
                  <td>Xfer To</td>
                  <td>Ref #</td>
                  <td>View Amount</td>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
                  <td>foo_bar</td>
               </tr>
            </tbody>
         </table>
      </div>
   </body>
</html>

Upvotes: 2

Views: 1779

Answers (2)

thirtydot
thirtydot

Reputation: 228302

Not 100% sure this is what you want, but try this:

  • You should add <!DOCTYPE html> (the HTML5 doctype) as your very first line (you must do this to escape quirks mode and help to ensure consistent rendering between different browsers).
  • Add float: left to div.add-padding.

Live Demo

Upvotes: 4

zdux
zdux

Reputation: 99

This is a perfect problem for Firebug. Right click inspect element, then look for a layout tab. You can trace the css / styles to the parent.

Upvotes: 1

Related Questions