Strategize your plan for the layout
Below is the HTML5 and CSS “starter” code for each of the major column layouts. Normally your design will fall into one of these 3 main structures: 1, 2, or 3 column layout. From there your design may get more complex then the illustrations below.
Is it one-column?
“Starter” HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE HTML> <html> <head> <title>Title of Website</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption'); </script> </head> <body> <div id="wrapper"> <header> </header> <div id="content"> </div> <footer> </footer> </div> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } *{ margin: 0px; padding: 0px; } body { margin-left: 0px; margin-top: 0px; } img { border: none; } #wrapper { width: 990px; margin-right: auto; margin-left: auto; } header { height: 130px; } #content { width: 990px; } footer { height: 50px; clear: both; } |
Is it two-column?
“Starter” HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <title>Title of Website</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption'); </script> </head> <body> <div id="wrapper"> <header> </header> <aside> </aside> <div id="content"> </div> <footer> </footer> </div> </body> </html> |
“Starter” CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } *{ margin: 0px; padding: 0px; } body { margin-left: 0px; margin-top: 0px; } img { border: none; } #wrapper { width: 990px; margin-right: auto; margin-left: auto; } header { height: 130px; } aside { width: 390px; float: left; } #content { width: 600px; float: left; } footer { height: 50px; clear: both; } |
Is it three-column?
“Starter” HTML5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <title>Title of Website</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script> document.createElement('article'); document.createElement('section'); document.createElement('aside'); document.createElement('hgroup'); document.createElement('nav'); document.createElement('header'); document.createElement('footer'); document.createElement('figure'); document.createElement('figcaption'); </script> </head> <body> <div id="wrapper"> <header> </header> <aside> </aside> <div id="content"> </div> <div id="rightsidebar"> </div> <footer> </footer> </div> </body> </html> |
“Starter” CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
article, section, aside, hgroup, nav, header, footer, figure, figcaption { display: block; } *{ margin: 0px; padding: 0px; } body { margin-left: 0px; margin-top: 0px; } img { border: none; } #wrapper { width: 990px; margin-right: auto; margin-left: auto; } header { height: 130px; } aside { width: 245px; float: left; } #content { width: 500px; float: left; } #rightsidebar { width: 245px; float: left; } footer { height: 50px; clear: both; } |
Other Resources (Sample Code)
Two Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column/
Two Column Faux CSS Layout: http://www.everythingaboutweb.com/classes/examples/2-column_faux/
Three Column CSS Layout: http://www.everythingaboutweb.com/classes/examples/3-column/
2 Column CSS Layout: Fixed Width And Centered
3 Column CSS Layout: Fixed Width And Centered
