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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>