I have a two column CSS layout with header and footer. The content column (named #centrecontent) which is the first is the longest. The background colour of the second column (named #right) does not go all the way down the footer. How can I do that. Here is the CSS: /* mac hide\*/ body {height:100%} html {height:100%} /* end hide */ body { padding:0; margin:0; text-align:center; padding-top:10px;/* to clear top of screen*/ min-width:931px;/* for mozilla*/ background-color:#A6AEB7; color: #000000; } #outer{ height:100%; min-height:100%; width:931px; /*border-left:1px solid #000; border-right:1px solid #000;*/ color: #000000; text-align:left; margin:auto; position:relative; background: url('NeoSite/Styles/images/centredbg.jpg') repeat-y center; position:relative; } html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/ #innerwrap {/* enables content first */ float:left; /* background-color:#ECF0F8;*/ height:100%; width:730px; } #header{ position:absolute; top:0; left:-1px; width:932px; height:185px; background-color: #58656D; /* border:1px solid #a6aeb7;*/ overflow:hidden; color: #000000; z-index:100; } #left p {padding-left:3px;padding-right:2px} #right p {padding-left:4px;padding-right:2px} #right { position:relative;/*ie needs this to show float */ width:200px; float:right; height:100%; /*background-image:url('../WebSiteResources/FantasticPictures/Compass/images9.jpg');*/ background-color:#C7CBD2; padding-top:186px;/*needed to make room for header*/ padding-bottom:25px;/* needed to make room for footer */ } #footer { width:930px; clear:both; height:70px; border-top:1px solid #000; border-bottom:1px solid #000; background-color: #323c53; color: #000000; text-align:left; left:0; bottom:0; position: absolute; } * html #footer {/*only ie gets this style*/ \height:27px;/* for ie5 */ he\ight:25px;/* for ie6 */ } p {margin-top:0} div {margin-top:0}/*clear top margin for mozilla*/ #centrecontent { width:728px; float:right; height:100%; padding: 0px; border-left:1px gray; background-color:#E6EAF2; /*padding:5px;*/ padding-top:186px; padding-bottom:25px;/* needed to make room for footer */ } #centrecontent p {padding-left:5px} #clearfooter {width:100%;height:27px;clear:both} /* to clear footer */ <style type="text/css"> /*Hyperlink Style...............................*/ /*...............................................*/ .style1 { left: 0px; top: 0px; } .style2 { margin-bottom: 0; } </style> And here is the Htm <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns="urn:schemas-microsoft-comfficeffice"> <head> <title></title> <META http-equiv=Content-Type content="text/html; charset=windows-1253"> <link href="Index2test.css" rel="stylesheet" type="text/css"> <style type="text/css"> a { color: #336CA3; } a:visited { color: #336CA3; } a:active { color: #336CA3; } a:hover { color:#AE2836; font-weight:600; text-decoration:underline; } </style> </head> <base target="_self" /> <body> <div id="outer" class="style1"> <div id="innerwrap"> <div id="centrecontent" class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> <p class="style25"> </div> </div> <!-- end innerwrap --> <div id="right" class="style172"> <br /> <br /> <br /> <br /> <br /> asdasd<br /> <br /> <br /> <br /> </div> <div id="clearfooter"></div> <!-- ie needs this --> <div id="header" class="style39"> <p class="style2"> <img alt="" src="Gifs/TopBaner900.jpg" width="930" height="124" /></p> <p class="style55"> <table class="style50" cellpadding="4"> <tr> <td class="style170"><strong> ΑÏθÏογÏαφία</strong></td> </tr> </table> </div> <div id="footer" class="style76"> <span class="style148">Το πεÏιεχόμενο και οι υπηÏεσίες του <a href="index.htm">istioploos.gr</a> διατίθενται στους επισκÎπτες του κόμβου αυστηÏά για Ï€Ïοσωπική χÏήση. ΑπαγοÏεÏεται η χÏήση τους, σε οποιοδήποτε άλλο μÎσο καθώς και για εμποÏικοÏÏ‚ σκοποÏÏ‚, χωÏίς γÏαπτή άδεια του κατόχου των πνευματικών δικαιωμάτων. O <a href="index.htm">istioploos.gr</a> δεν ευθÏνεται για το πεÏιεχόμενο εξωτεÏικών κόμβων στους οποίους είναι πιθανό να οδηγοÏν οι συνδÎσεις του. Τους πλήÏεις ÏŒÏους και Ï€ÏοϋποθÎσεις χÏήσης του Î´Î¹ÎºÏ„Ï…Î±ÎºÎ¿Ï Ï„ÏŒÏ€Î¿Ï… <a href="index.htm">istioploos.gr</a> θα βÏείτε <a href="Oroi.htm">εδώ</a>.</span><span class="style67"><br /> <br /> <span class="style75">| </span><a href="index.htm">ΑÏχική Σελίδα</a></span><span class="style75"> | </span> <span class="style67"><a href="SiteMap.htm">ΧάÏτης Ιστότοπου</a></span><span class="style75"> | </span> <span class="style80"><a href="Links.htm">ΣÏνδεσμοι</a></span><span class="style75"> | </span> <span class="style80"><a href="Oroi.htm">ÎŒÏοι ΧÏήσης</a></span><span class="style75"> | </span> <span class="style80"><a href="Epikoinonia.htm">Επικοινωνία</a></span><span class="style75"> | <span class="style34"> </span> <span class="style171"> </span> <span class="style34"> </span> </span><span class="style108"><span lang="el" class="style151">Σχεδιασμός</span><span class="style151">:</span><span lang="el"> <span class="style34"><a href="mailto:mail@istioploos.gr">ΑΜ</a></span></span></span></div> </div> <!-- end outer div --> </body></html> Thank you
Example www.istioploos.gr but this is a three column layout. Basically I turned this into a two column layout but I will still have to make it work on the three column layout. Currently I used fixed height to all three columns. TY