Hi guys, I have a slight problem and I am hoping some CSS guru is able to lend a hand. I am working on a design where I need a right column that extends both upward into the header, and downward into the footer. I know this involves CSS layers somehow (z-index?), but cannot seem to wrap my head around it. Here is my complete code to demonstrate <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <style type="text/css"> #wrapper { width:500px; border:solid 1px #000; } #topmenu { background-color:#09F; clear:both; width:100%; height:200px; } #header { background-color:#999; clear:both; width:100%; height:200px; } #mainarea { width:100%; background-color:#FF0; clear:both; } #leftcolumn { float:left; width:200px; background-color:#063; height:300px; } #rightcolumn { float:right; width:300px; background-color:#666; margin-top:-40px; } #footer { clear:both; width:100%; background-color:#999; height:200px; } </style> </head> <body> <div id="wrapper"> <div id="topmenu">This is the top menu</div> <div id="header">This is the header</div> <div id="mainarea"> <div id="leftcolumn">This is the left area</div> <div id="rightcolumn">This is some text, floated right, with 40px up into the header and the possibility of overlapping the footer.</div> </div> <div id="footer">This is the footer</div> </div> </body> </html> HTML: