Liquid Layout - fixed left and right columns
<!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>Liquid Layout - fixed left and right columns</title> <meta http-equiv= "Content-Type" content= "text/html; charset=iso-8859-1" /> <style type= "text/css" > body { margin: 10 px 40 px; padding: 0 ; text-align: center; background: gold; } #wrapper { text-align: left; background: red; border: 1 px solid silver; } #header { background: # 272727 ; padding: 10 px 15 px 10 px 13 px; } #content-wrapper { float : right; background: #fff; width: 75 %; } #content-inner { width: 70 %; padding: 10 px 0 10 px 15 px; float : left; } #navigation { width: 25 %; float : left; padding-top: 15 px; } #related { float : right; width: 25 %; } #related ul { margin: 0 ; padding-left: 15 px; } #related h2 { font-size: large; } #footer { clear: both; } </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. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. </p> </div> <div id= "related" > <h2>Related Links</h2> <ul> <li><a href= "" >P</a></li> <li><a href= "" >S</a></li> <li><a href= "" >I</a></li> </ul> </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 id= "footer" ></div> </div> </ body > </ html >
HTML code for linking to this page:
Related in same category :