jdubwelch Posted March 1, 2007 Share Posted 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> Quote Link to comment Share on other sites More sharing options...
jdubwelch Posted March 1, 2007 Author Share Posted 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%; } Quote Link to comment Share on other sites More sharing options...
jcombs_31 Posted March 1, 2007 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.