I want to design a CSS webpage with 3 columns. The outer columns are borders, the center column will contain the text. I want the outer columns to extend to the bottom of the page. I got some code from http://www.webmasterworld.com/forum83/200.htm I tried it and it seemed to work - see http://briandina.com/column_full_height1.htm But when I added some extra text to one of the center columns, the outer columns no longer went to the bottom of the page - see http://briandina.com/column_full_height2.htm If I use and 3-column TABLE (text in the center column/borders in the outside columns), I can get the columns to go to the bottom of the page , but I want to do it with CSS (so I can use CSS to later change the colors, backgrounds, layer/column widths, etc...on multiple pages) Am I missing something in the "body style tag?" Anybody have any ideas or know of a tutorial that shows me how to do this? Thanks, ~Brian brian@briandina.com 425-485-2019
Hi Brian, The code you have looks nice, but isn't what I'd use. I normally use this CSS layout for my three column sites. Note that there is some advanced CSS in there (like the image replacement technique I use for the header - just create a basic image in a graphics program that is equal to the size of the image specified in the stylesheet, then save it and upload to the server; as long as the file name and path matches, you should see a nice surprise - the image instead of the text). I'm just going through the various threads for now, but if you want, I can explain how this layout works in detail; sorry the background colors don't go all the way down, but there are a few ways around it that could work with a bit of elbow-grease. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>Untitled Document</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #FFF; color: #000; } #container { height: 100%; min-height: 100%; margin-bottom: -2em; } html>body #container { height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */ } .skipLink { position: absolute; left: -999em; } #header { background: #00F; color: #FFF; height: 80px; overflow: hidden; position: relative; width: 100%; } h1, h1 span { background: url('/images/header.png') no-repeat; /* this is an image that will replace the default header text */ height: 80px; /* just an example height */ width: 618px; /* just an example width */ } h1 span { display: block; margin-bottom: -80px; /* must be the same as the height of the image */ position: relative; z-index: 1; } #header p { position: absolute; top: 2.25em; text-indent: 1.5em; } #main { float: left; margin-right: -10em; /* equal to the width of the #sidebar DIV container */ width: 100%; /* DO NOT CHANGE OR REMOVE */ } #menu { float: left; list-style: none; width: 7em; } #menu li { display: inline; } #menu a { background: #F00; color: #FFF; display: block; text-decoration: none; text-indent: 0.5em; width: 100%; } #menu a:hover { background: #FF0; color: #000; } #content { margin: 0 10em 0 7em; /* right margin is equal to the width of the sidebar, left margin is equal to the width of the menu */ } #content h2 { text-align: center; } #content .section { padding: 0.5em 0; } #content h3 { padding-left: 0.5em; } #content p { padding: 0.25em 0.5em; } #sidebar { background: #999; color: #FFF; float: right; width: 10em; } #sidebar h2, #sidebar h3 { text-align: center; } #sidebar .section { padding: 0 0.25em; } #sidebar p { padding: 0 0.5em; } #clearFooter { /* needed to make room for the footer */ clear: both; height: 2em; } #footer { background: #FCF; clear: both; color: #333; height: 2em; position: relative; } #footer p { padding-top: 0.45em; text-align: center; } --> </style> <!--[if lt IE 7]> <style type="text/css" media="screen"> /* THE FOLLOWING ARE REQUIRED TO FIX THE INFAMOUS 3 PIXEL JOG */ #menu { margin-right: -3px; } #content { height: 1%; /* IE 5x and 6 treats height as min-height, so this goes here; also fixes a layout bug in legacy IE versions */ margin-left: -3px; } </style> <![endif]--> </head> <body> <div id="container"> <div id="header"> <h1><span></span>Level 1 Header</h1> <p> Tag Line </p> </div> <div id="main"> <strong class="skipLink">Main Menu <a href="#content">(Skip to Content)</a></strong> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="content"> <h2>Page Title</h2> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p> </div> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum... Lorem ipsum...</p> </div> </div> </div> <div id="sidebar"> <h2>Sidebar Title</h2> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </div> <div class="section"> <h3>Section Header</h3> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </div> </div> <div id="clearFooter"></div> </div> <div id="footer"> <p> Copyright © 2006, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup):