3 column layout

jdubwelch · March 1, 2007

how do you make a three column layout with each column the same height. But the height is dependent on the content in the "content" div?

here's my html :

<body>
<div id="container">
  <div id="header"></div>
  <div id="left">
    <h1>Hoop Fix 2007</h1>
    <ul>
      <li>register</li>
      <li>rules</li>
      <li>players</li>
      <li>standings </li>
    </ul>
  </div>
  <div id="right">
    <h1>nifty 9 </h1>
    <ol>
      <li>J. Welch [22]</li>
      <li>R. Welch [21]</li>
      <li>J. Carmichael [21]</li>
      <li>etc   </li>
    </ol>
    <h1>Winning Percentage</h1>
    <p>Joe Smith leads the winning percentage category with 85.5%. For a complete list, <a href="#">click here</a>.   </p>
    <h1>Score Board</h1>
    <p>#1 UCLA 86<br />
    #16 WINTHROP 54</p>
    <p>#9 OREGON 81<br />
    #8 KENTUCKY 78</p>
    <h1>UPSETS</h1>
    <p>#12 DREXEL 65<br />
    #5 BYU 61</p>
    <p>#14 LONG BEACH 66<br />
      #3 WASHINGTON STATE 60
      </p>
  </div>
  <div id="content">
   <!-- start of content -->
   <h1>Welcome to Hoop Fix 2007 </h1>
<p>Welcome to Hoop Fix 2007, yet another year of big games, huge upset and last minute heroics. Join the fun and register today. You’ll be able to make your picks on Selection Sunday, March 11. </p>
<p>Quick Rundown: <br />
  TODAY: Register Now <br />
  BEFORE MARCH 11: Pay your entry fee ($5)<br />
  MARCH 11: Sign in to make your picks</p>
<p><br />
</p>
<!-- end of content -->
  </div>
  </div>
</body>

jdubwelch · March 1, 2007

here's the css i have so far:

body {
padding: 0px;
margin-top: 10px;
margin-left: 10px;
}
#container {
font-family: Courier, monospace;
width: 800px;
}
#container #header {
height: 47px;
background-image: url(../images/headerbg.gif);
}
#container #left {
float: left;
width: 213px;
background-image: url(../images/leftbg.gif);
background-repeat: repeat-y;
}
#container #left h1 {
margin: 0;
padding: 0;
}
#container #left ul {
margin: 0px;
padding: 0px;
}
#container #left li {
list-style-type: none;
}
#container #right {
float: right;
width: 145px;
background-image: url(../images/rightbg.gif);
background-repeat: repeat-y;
padding-left: 11px;
padding-top: 5px;
}
#container #right h1 {
font-size: 12px;
margin: 0;
padding: 0;
}
#container #right p {
font-size: 10px;
padding: 0;
margin-top: 5px;
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif;
}
#container #content {
margin-left: 213px;
margin-right: 156px;
padding-right: 10px;
padding-left: 10px;
background-color: #FFF18F;
}
#container #content h1 {
text-transform: capitalize;
margin: 0;
padding: 0;
font-size: 18px;
}
#container #content p {
font-size: 12px;
line-height: 150%;
}

jcombs_31 · March 1, 2007

easiest way is faux columns. Pretty easy to do. Just apply the background image to the container and it will stretch the full height of your content.

Sign In

3 column layout

Recommended Posts

jdubwelch

Link to comment

Share on other sites

jdubwelch

Link to comment

Share on other sites

jcombs_31

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information