getting columns to expand 100%

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • GluteHam
    New Member
    • Jul 2007
    • 40
    #1

    getting columns to expand 100%

    Hi, I'm back with an almost finished template that is pretty accessible :-)

    My only woe at this point is to get all three columns (leftcol, midcol, rightcol) to expand vertically 100%. As you can see from the code I tried some hacks, but that hasn't worked. My main priority is the right column. Any suggestions are appreciated. Thanks!!!

    http://www.granthansen .com/test/homepage_contai ner_test.html
    http://www.granthansen .com/test/whev_test.css
    Tags: None
    • lzellner
      New Member
      • Aug 2007
      • 2
      #2
      Hello,

      I think if you start with this you will be able to do what you want.

      I hope it helps.

      Larry

      HTML

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Fixed Width CSS Layouts - 3 Column - fw-37-3-col</title>
      <link rel="stylesheet " type="text/css" href="main.css" />
      </head>

      <body>

      <!-- Begin Wrapper -->
      <div id="wrapper">

      <!-- Begin Header -->
      <div id="header">

      This is the Header

      </div>
      <!-- End Header -->

      <!-- Begin Navigation -->
      <div id="navigation" >

      This is the Navigation

      </div>
      <!-- End Navigation -->

      <!-- Begin Left Column -->
      <div id="leftcolumn" >

      Left Column

      </div>
      <!-- End Left Column -->

      <!-- Begin Content Column -->
      <div id="content">

      <a href="#">Downlo ad this CSS Layout</a>

      </div>
      <!-- End Content Column -->

      <!-- Begin Right Column -->
      <div id="rightcolumn ">

      Right Column

      </div>
      <!-- End Right Column -->

      <!-- Begin Footer -->
      <div id="footer">

      This is the Footer

      </div>
      <!-- End Footer -->

      </div>
      <!-- End Wrapper -->

      </body>
      </html>









      CSS

      */

      * { padding: 0; margin: 0; }

      body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      }
      #wrapper {
      margin: 0 auto;
      width: 922px;
      }
      #header {
      color: #333;
      width: 900px;
      float: left;
      padding: 10px;
      border: 1px solid #ccc;
      height: 100px;
      margin: 10px 0px 5px 0px;
      background: #E7DBD5;
      }
      #navigation {
      float: left;
      width: 900px;
      color: #333;
      padding: 10px;
      border: 1px solid #ccc;
      margin: 0px 0px 5px 0px;
      background: #BD9C8C;
      }
      #leftcolumn {
      color: #333;
      border: 1px solid #ccc;
      background: #E7DBD5;
      margin: 0px 5px 5px 0px;
      padding: 10px;
      height: 350px;
      width: 195px;
      float: left;
      }
      #content {
      float: left;
      color: #333;
      border: 1px solid #ccc;
      background: #F2F2E6;
      margin: 0px 5px 5px 0px;
      padding: 10px;
      height: 350px;
      width: 456px;
      display: inline;
      }
      #rightcolumn {
      color: #333;
      border: 1px solid #ccc;
      background: #E7DBD5;
      margin: 0px 0px 5px 0px;
      padding: 10px;
      height: 350px;
      width: 195px;
      float: left;
      }
      #footer {
      width: 900px;
      clear: both;
      color: #333;
      border: 1px solid #ccc;
      background: #BD9C8C;
      margin: 0px 0px 10px 0px;
      padding: 10px;
      }

        Comment

        Previous template Next
        Working...