Expanding DIV to Width of Container on Page Overflow

I am trying to create a simple box with some content and a colored header. Here is a bare-bones example of what I am talking about: http://guardingdark.com/css-20100217.html

I will paste the code below too.

The issue is when the the content DIV pushes the width of the block outside of the width of the page. The block DIV expands with the content DIV. I want the header DIV to expand to the same width, but I don't know how to do that or if it's even possible.

Is there a way to force the header to be the same size as the expanded block?

<html>

  <head>
    <style type="text/css">
      .block {
        background-color: white;
        border: 1px solid gray;
        margin: 10px;
        width: 100%
      }

      .header {
        width:100%;
            vertical-align: middle;
            color: black;
        padding: 2px 0 2px 5px;
        border-bottom: 1px solid green; 
        margin: 0px;
        background-color: green;
      }

      .content {
        padding: 3px 6px;
          margin: 0px;
          width: 100%;
      }

      body {
        background-color: black;
      }

      /* Using to force the table to be rather wide, for example only*/
      TD {
        white-space: nowrap;
      }
    </style>
  </head>

  <body>

  <div class="block">
    <div class="header">
      Header Text
    </div>
    <div class="content">
      <table width="100%">
        <tr>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
          <td>
            Text Text Text Text Text
          </td>
        </tr>
      </table>
    </div>
  </div>

  </body>

</html>

Notes:

This would need to work in IE7/IE8 quirks mode
I would prefer to make it work without using overflow:auto on the content div. I want to avoid scroll bars if I can on the blocks.

ansaurus

tags:

views:

answers:

Expanding DIV to Width of Container on Page Overflow

related questions