HTML5 Code for 1, 2 and 3 Column CSS Layouts

Apr 01, 2013 by eaw in HTML/CSS

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;
}