HTML5 Code for 1, 2 and 3 Column CSS Layouts
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
<!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>
“Starter” CSS
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;
}
Resource: VIDEO: One Column CSS Layout (Parts 1- 3)
Is it two-column?
“Starter” HTML5
<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
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;
}
Resource: VIDEO: Two Column CSS Layout (Parts 1- 2)
Is it three-column?
“Starter” HTML5
<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
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
Didn’t work. Blank page.
Tried adding css as inline.
That failed also.
Thanks for the work though.
If you’d add background colors in css than you’d see the layout 😉
Thanks for share This ,Help me A lot !!!!