[thelist] ROLL UP! ROLL UP! Who can convert this simple table layout to CSS?

Patrick Horgan phorgan1 at yahoo.com
Fri Jul 22 18:54:17 CDT 2011


How's this?

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8" />
    <title>CSS layout</title>
    <style type="text/css">
      * { margin: 0; padding: 0; }
      html, body {
        height: 100%;
      }
      #thecontent{
        width:500px;
        height:100%;
        background-color: rgb(194,224,248);
        margin: auto;
      }
      #header{
        background-color: rgb(224,245,220);
        height: 52px;
        line-height: 52px;
      }
      #postheader p {
        padding-top: 1em;
        background-color: rgb(194,224,248);
      }
    </style>
  </head>
  <body>
    <div id='thecontent'>
      <div id='header'>
          Header here
      </div>
      <div id='postheader'>
        <p>
          Content would go in here. If there isn't enough content to
          fill the screen, this blue section should still stretch to
          the bottom of the window. If there are scrollbars however,
          the blue section should stretch to the bottom of the content.
        </p>
        <p>
          Content would go in here. If there isn't enough content to
          fill the screen, this blue section should still stretch to
          the bottom of the window. If there are scrollbars however,
          the blue section should stretch to the bottom of the content.
        </p>
        <p>
          Content would go in here. If there isn't enough content to
          fill the screen, this blue section should still stretch to
          the bottom of the window. If there are scrollbars however,
          the blue section should stretch to the bottom of the content.
        </p>
      </div>
    </div>
  </body>
</html>



More information about the thelist mailing list