Fixed Width Layout - Fixed height to solve left column problem
<!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> <title>Fixed Width Layout - Fixed height to solve left column problem</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> body { margin: 0; padding: 0; text-align: center; background: #f0f0f0; } #wrapper { text-align: left; width: 770px; margin: 10px auto 0 auto; position: relative; height: 600px; background: #fff; } #header { background: #272727; padding: 10px 15px 10px 13px; } #content-wrapper { width: 570px; position: absolute; left: 200px; } #content-inner { padding: 5px 15px 0 15px; } #navigation { position: absolute; width: 200px; padding-top: 15px; } </style> </head> <body> <div id="wrapper"> <div id="header">Header</div> <div id="content-wrapper"> <div id="content-inner"> <p>this is a test. this is a test. </p> <p>this is a test. this is a test. </p> <p>this is a test. this is a test. </p> </div> </div> <div id="navigation"> <ul> <li><a href="">Day 1 </a></li> <li><a href="">Day 2 </a></li> <li><a href="">Day 3 </a></li> <li><a href="">Day 4 </a></li> <li><a href="">Day 5 </a></li> </ul> </div> </div> </body> </html>
1. | Fixed Width Layout - Left column not stretching | ||
2. | Fixed Width Layout - Outer container collapsed | ||
3. | fixed width float and clear |