Register now and start sharing your code snippets.
How to create a mixed 2 to 3 column layout with footer and header
HTML posted 11 months ago by christian
This is a draft, and an experiment with composing to a vertical flow and the golden ratio
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html> 4 <head> 5 <title>3 column</title> 6 <style type="text/css"> 7 8 /** Reset styles */ 9 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td { 10 margin:0; 11 padding:0; 12 } 13 14 /** 3 column layout */ 15 16 #container{ 17 background-color:#9cc; 18 width: 69em; 19 margin: 0 auto; 20 } 21 22 #content{ 23 float: left; 24 width: 41em; 25 } 26 27 #sidebar{ 28 float: right; 29 width: 23em; 30 } 31 32 #column1{ 33 float: left; 34 width:23em; 35 } 36 37 #column2{ 38 float: left; 39 width:23em; 40 } 41 42 #column3{ 43 float: left; 44 width:23em; 45 } 46 47 48 /* Vertical flow */ 49 50 body { 51 font-size: 75%; 52 } 53 54 html>body { 55 font-size: 14px; 56 } 57 58 p { 59 line-height 1.5em; 60 } 61 62 63 /* Temp styles */ 64 #column1, #column2, #column3, #content, #sidebar { 65 # background: blue; 66 # border: 1px solid black; 67 } 68 69 /** */ 70 body{ 71 font-family: Palatino,"Palatino Linotype",Georgia,serif; 72 } 73 74 </style> 75 </head> 76 <body> 77 78 <div id="header"> 79 <div id="container"> 80 <div id="column1">Header 1</div> 81 <div id="column2">Header 2</div> 82 <div id="column3">Header 3</div> 83 </div> 84 </div> 85 86 <div id="container"> 87 <div id="content">Content</div> 88 <div id="sidebar">Sidebar</div> 89 </div> 90 91 <div id="footer"> 92 <div id="container"> 93 <div id="column1">Footer 1</div> 94 <div id="column2">Footer 2</div> 95 <div id="column3">Footer 3</div> 96 </div> 97 </div> 98 99 </body> 100 </html>
Elastic 2 column XHTML and CSS layout
HTML posted about 1 year ago by christian
This is a slight modification of Roger Johansson’s code that I found while reading this article. I’ve modified the code to use ems instead of pixels—Mike Jolley has written about why ems are preferrable over pixels.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 4 <head> 5 <title></title> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <meta name="description" content=""/> 8 <style type="text/css"> 9 * { 10 font-size:95%; 11 font-family: georgia,'Times',serif; 12 } 13 14 body { 15 min-width:62em; 16 } 17 18 #wrap { 19 margin:0 auto; 20 width:60em; 21 border: 1px solid blue; 22 } 23 24 #content { 25 float:left; 26 width:40em; 27 border: 1px solid blue; 28 } 29 30 #sidebar { 31 float:right; 32 width:19em; 33 border: 1px solid blue; 34 } 35 36 #footer { 37 clear:both; 38 border: 1px solid blue; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="wrap"> 44 <div id="header"> 45 Header 46 </div> 47 <div id="nav"> 48 Navigation 49 </div> 50 <div id="content"> 51 Content 52 </div> 53 <div id="sidebar"> 54 Sidebar 55 </div> 56 <div id="footer"> 57 Footer 58 </div> 59 </div> 60 </body> 61 </html>