Hi! I've just made a little theme that I had previously sketched out and had been meaning to actually type up, but there is one part I can't get quite right, so I figured someone here would kindly enlighten me . The problem is that I can't get right-hand column (.rightcol) to be the full height of the page. Here is what the html looks like: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> </title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="header"> <div id="logo"> </div> </div> <div class="nav"> <ul> <li id="active"> <a href="http://www.example.com/"> Home </a> </li> <li> <a href="http://www.example.com/"> Link Two </a> </li> <li> <a href="http://www.example.com/"> Link Three </a> </li> <li> <a href="http://www.example.com/"> Link Four </a> </li> <li> <a href="http://www.example.com/"> Link Five </a> </li> </ul> </div> <div class="leftcol"> <h1> Home </h1> <p> Content </p> </div> <div class="rightcol"> Link 1 <br> Link 2 <br> Link 3 <br> Link 4 <br> Link 5 </div> <div class="footer"> Hello World! </div> </div> </body> </html> Code (markup): and here is the CSS: html { } body { margin: 0; padding: 0; background-color: #cccccc; } a { } a:hover { } .container { width: 65%; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding: 20px; background-color: #ffffff; } .header { margin-bottom: 20px; } #logo { width: 325px; height: 50px; background-image: url(images/logo.png); background-repeat: no-repeat; } .nav { margin: 0; padding: 0; } .nav ul { margin: 0; padding: 0; border-bottom-style: solid; border-bottom-color: #eeeeee; border-bottom-width: 5px; list-style-type: none; } .nav ul li { margin: 0; padding: 5px; border-left-style: solid; border-top-style: solid; border-right-style: solid; border-left-color: #eeeeee; border-top-color: #eeeeee; border-right-color: #eeeeee; border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; display: inline; font-size: .8em; text-transform: uppercase; } .nav ul li:hover { background-color: #eeeeee; } #active { background-color: #eeeeee; } .nav ul li a { color: #000000; text-decoration: none; } .leftcol { font-size: .8em; float: left; width: 70%; margin-top: 10px; margin-bottom: 10px; margin-left: 0; } .rightcol { font-size: .8em; height: 100%; width: 20%; float: right; margin-top: 10px; margin-bottom: 10px; padding: 20px; background-color: #eeeeee; } .footer { padding: 20px; font-size: .8em; float: bottom; background-color: #eeeeee; clear: both; } Code (markup): If you notice any other mistakes or things that won't always display the same, please tell me that too. Thanks!
It's a div, you can't have both the full height of the page. HTML/CSS layouts don't work that way. This is why you would wrap both columns in a DIV set up to wrap floats, and apply a background-image using the 'faux columns' technique... Which also means you cannot have your dynamic widths on leftcol and rightcol. Basically what you are trying to do using HTML/CSS cannot be done without using a table, or using PX widths on at least ONE of your columns. (usually the narrow one is the one you fix the width of). As a rule of thumb % widths and heights are pretty much made of /FAIL/ and are more headache than they are worth to try and implement if you want the columns to appear to stretch in height.
Thanks for replying, but I still can't figure out how to make the right column to be the full length. I know it can be done without the faux columns technique since there are many sites that do it without background images, for example: http://bbpress.org/.
I changed it some, but the right column still doesn't go to the full length. Here is the HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> </title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div class="container"> <div class="header"> <div id="logo"> </div> </div> <div class="nav"> <ul> <li> <a id="active" href="http://www.google.com/"> Home </a> </li> <li> <a href="http://www.google.com/"> Link Two </a> </li> <li> <a href="http://www.google.com/"> Link Three </a> </li> <li> <a href="http://www.google.com/"> Link Four </a> </li> <li> <a href="http://www.google.com/"> Link Five </a> </li> </ul> </div> <div class="rightcol"> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 <br> Column 2 </div> <div class="content"> <h1> Home </h1> <p> <span class="dropcaps"> L </span> orem ipsum dolor sit amet, consectetur adipiscing elit. Proin velit ipsum, hendrerit vitae placerat ac, viverra et dui. Nam ante massa, facilisis eu viverra sit amet, vehicula ac neque. Cras a nunc nec nisl gravida auctor. Donec et urna vel nibh semper aliquet volutpat lacinia justo. Morbi mollis consequat rhoncus. Sed placerat tempus purus vel hendrerit. Mauris accumsan vulputate massa, vitae adipiscing nulla venenatis a. Curabitur blandit rutrum tellus, et posuere erat tincidunt non. Sed vel velit ut risus facilisis scelerisque. Nulla at lorem ipsum. Nullam sit amet posuere tortor. Morbi leo leo, rhoncus in tempus sed, fermentum eu tortor. Nulla a tellus nunc, id sollicitudin nisl. Donec suscipit sagittis sem ut laoreet. Aenean hendrerit semper imperdiet. Nam quis eros ante, quis gravida arcu. </p> <p> Integer leo neque, rhoncus et scelerisque vitae, tincidunt id magna. Nulla convallis, turpis a rutrum eleifend, magna ante viverra libero, vel laoreet eros nisl vitae metus. Mauris nunc felis, bibendum consequat sagittis sed, auctor porta justo. Ut malesuada, eros accumsan sollicitudin accumsan, diam dolor pretium est, et posuere augue tortor dictum nulla. Integer justo lacus, pellentesque nec mollis sed, pharetra non est. Phasellus a orci nec ligula mattis fringilla eu eleifend quam. Phasellus erat metus, eleifend a congue sit amet, porttitor sit amet mauris. Nunc sed est nisl, quis facilisis libero. Nam in erat dolor. In convallis hendrerit libero porttitor convallis. Nulla facilisi. Vivamus ac dui et leo tristique rhoncus non non mauris. Nunc at erat dui, at mollis lectus. Etiam ut felis et urna consequat vulputate ut vitae justo. Curabitur pulvinar faucibus eros, quis tincidunt neque laoreet at. Morbi et felis risus, a imperdiet mi. Nullam accumsan dolor vel nisi rutrum id dignissim ante lacinia. Fusce facilisis sodales sem, vel suscipit neque tempus eu. Aliquam justo tellus, condimentum sit amet adipiscing ac, vestibulum sed enim. Donec bibendum suscipit dapibus. </p> </div> <div class="footer"> Footer </div> </div> </body> </html> Code (markup): and here is the CSS: html { } body { height: 100%; font-family: 'Lucida Sans', 'Helvetica', 'Verdana', 'Arial', 'sans-serif'; margin: 0; padding: 0; background-color: #cccccc; } a { } a:hover { } .container { height: 100%; width: 50em; max-width: 100%; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; padding: 1.6em; background-color: #ffffff; } .header { margin-bottom: 1.6em; } #logo { width: 324px; height: 54px; background-image: url(images/logo.png); background-repeat: no-repeat; } .nav { } .nav ul { margin: 0; padding: 0; border-bottom-style: solid; border-bottom-color: #eeeeee; border-bottom-width: .25em; list-style-type: none; } .nav ul li { display: inline; font-size: .8em; text-transform: uppercase; } .nav ul li a { border-left-style: solid; border-top-style: solid; border-right-style: solid; border-left-color: #eeeeee; border-top-color: #eeeeee; border-right-color: #eeeeee; border-left-width: .1em; border-top-width: .1em; border-right-width: .1em; padding: .25em; margin: 0; color: #333333; text-decoration: none; } .nav ul li a:hover { background-color: #eeeeee; color: #ffffff; } .nav ul li a#active { background-color: #eeeeee; color: #ffffff; } .rightcol { color: #333333; font-size: .8em; height: 100%; width: 15em; float: right; margin-top: 1.6em; margin-bottom: 1.6em; margin-left: 1.6em; padding: 1.6em; background-color: #eeeeee; } .content { color: #333333; line-height: 1.5em; font-size: .8em; } .content .dropcaps { color: #999999; padding-right: .25em; clear: left; float: left; font-size: 5em; line-height: .8em; } .footer { color: #333333; padding: 1.6em; font-size: .8em; background-color: #eeeeee; clear: both; text-align: center; } Code (markup):