Let DIV span two columns
<!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" dir="ltr" lang="en-US" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title></title> <style rel="stylesheet" type="text/css"> * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { margin: 0 auto; width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; border: 1px solid #ccc; height: 100px; margin: 10px 0px 5px 0px; background: #BD9C8C; } #leftcolumn { color: #333; border: 1px solid #ccc; background: #E7DBD5; margin: 0px 5px 5px 0px; padding: 10px; height: 350px; width: 195px; float: left; } #rightcolumn { float: right; color: #333; border: 1px solid #ccc; background: #F2F2E6; margin: 0px 0px 5px 0px; padding: 10px; height: 350px; width: 678px; display: inline; } #footer { width: 900px; clear: both; color: #333; border: 1px solid #ccc; background: #BD9C8C; margin: 0px 0px 10px 0px; padding: 10px; } </style> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> This is the Header </div> <!-- End Header --> <!-- Begin Left Column --> <div id="leftcolumn"> Left Column </div> <!-- End Left Column --> <!-- Begin Right Column --> <div id="rightcolumn"> </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> This is the Footer </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html>