The HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Fixed Width CSS Layouts - 2 Column - fw-19-2-col</title><link rel="stylesheet" type="text/css" href="main.css" /></head>
<body>
<!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> This is the Header </div> <!-- End Header --> <!-- Begin Navigation --> <div id="navigation"> This is the Navigation </div> <!-- End Navigation --> <!-- Begin Left Column --> <div id="leftcolumn"> <a href="fw-19-2-col.zip">Download this CSS Layout</a> </div> <!-- End Left Column --> <!-- Begin Right Column --> <div id="rightcolumn"> Right Column </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> This is the Footer </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body></html>
* { 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; background: #E7DBD5;}#navigation { float: left; width: 900px; color: #333; padding: 10px; border: 1px solid #ccc; margin: 0px 0px 5px 0px; background: #BD9C8C;}#leftcolumn { color: #333; border: 1px solid #ccc; margin: 0px 5px 5px 0px; padding: 10px; height: 350px; width: 678px; float: left; background: #F2F2E6;}#rightcolumn { float: right; color: #333; border: 1px solid #ccc; margin: 0px 0px 5px 0px; padding: 10px; height: 350px; width: 195px; display: inline; background: #E7DBD5;}#footer { width: 900px; clear: both; color: #333; border: 1px solid #ccc; background: #BD9C8C; margin: 0px 0px 10px 0px; padding: 10px;}
