Set up files for HTML5 Two Column Layout

*IMPORTANT: Please note that that video above uses the older IE fix of document.createElement lines. The HTML5 shiv has replaced this older fix and is included in the code below.

Download the HTML5 shiv and create a “js” folder at the same level as your index.html. Place the html5shiv.js and html5shiv-printshiv.js files located in the “dist” inside your “js” folder.

1. Start with basic tags

<!DOCTYPE html>
<html>

        <head>
        <title>A sample HTML5 two-column layout</title>

        <meta name="description" content="Don't forget to add a 1-2 sentence description here.">
        <meta name="keywords" content="Don't forget to add 20-30 important keywords here.">

        <link href="css/reset.css" rel="stylesheet" type="text/css">
        <link href="css/style.css" rel="stylesheet" type="text/css">

        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->

        </head>

<body>

      <div id="wrapper">

           <header>

                   <nav> </nav>

          </header>

                   <div id="content">  </div> 

                   <div id="rightcol">  </div> 

                   <footer>  </footer>

      </div> 

</body>
</html>

2. Create reset.css

What is a reset.css for? From the master of the Web, Eric Meyer:

“The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you’re interested. Reset styles quite often appear in CSS frameworks, and the original “meyerweb reset” found its way into Blueprint, among others.”

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

3. Create style.css

@charset "UTF-8";
/* CSS Document */

#wrapper {
width: 960px;
background-color: #FFF;
margin-left:auto;
margin-right:auto;
}

header {
height: 200px;
}

nav {
width:960px;
}

#content {
float: left;
width:660px;

}

#rightcol {
float: left;
width: 300px;
}

footer {
clear:both;
height: 50px;
}

Build a HTML5 Two Column: Add Content (HTML)

4. Add additional elements

Add logo, navigation, content, rightcol & markup

a. Logo

Download this image:

b. Navigation

Create as a unordered list.

Home. (Add link to index.html)
About (Add link to about.html)
Tutorials. (Add link to tutorials.html)
Contact (Add link to contact.html)

c. Add h1 text to content div

Learning HTML5 Two-Column Layout

d. Add text to content div

H2 Heading
Genuine investments university art purebred investments. Imported property philanthropic estate, designer, first-class educated dynasty luxury purebred manor high-rise enthusiast. Inspiring diplomatatic pedigree wine vacation cutlery genuine wine handmade. Repertoire panoramic townhome, enthusiast, pearl gilded brilliant gentlemen, charity purebred. Impressive investments crafted, accredited, marquis affluent repertoire doctoral, enthusiast.

H2 Heading
Using cutlery fashion suite, portfolio guests fashion dynasty, wine rare investments a. Affluent sport noble first-class, sterling butler. European, townhome travel university, stockmarket in bonds art educated presidential le panoramic brokerage. Fashion with wealth le marquis townhome classical suite property auction purebred.

e. Add rightcol text

H2 Recent Posts
H3 Subheading
This is a short description.
H3 Subheading
This is a short description.
H3 Subheading
This is a short description.

f. Add footer text

<!DOCTYPE html>
<html>

        <head>
        <title>A sample HTML5 two-column layout</title>

        <meta name="description" content="Don't forget to add a 1-2 sentence description here.">
        <meta name="keywords" content="Don't forget to add 20-30 important keywords here.">

        <link href="css/reset.css" rel="stylesheet" type="text/css">
        <link href="css/style.css" rel="stylesheet" type="text/css">

        <!--[if lt IE 9]>
        <script src="js/html5shiv.js"></script>
        <![endif]-->

        </head>

<body>

      <div id="wrapper">

           <header>

              <div id="logo"> <img src="images/everything-about-web.png" width="394" height="146" 
alt="everything about web"></div>

                   <nav>

                           <ul>
                           <li class="highlight"><a href="index.html">Home</a></li>
                           <li><a href="about.html">About</a></li>
                           <li><a href="tutorials.html">Tutorials</a></li>
                           <li><a href="contact.html">Contact</a></li>
                           </ul>

                   </nav>

          </header>

<div id="content">

          <h1>Learning HTML 5 The Two-Column Layout</h1>

                    <section>
                    <article>
                    <h2>Heading</h2>
                    <p>Genuine investments university art purebred investments. Imported property 
philanthropic estate, designer, first-class educated dynasty luxury purebred manor high-rise enthusiast. 
Inspiring diplomatatic pedigree wine vacation cutlery genuine wine handmade. Repertoire panoramic townhome, 
enthusiast, pearl gilded brilliant gentlemen, charity purebred. Impressive investments crafted, accredited, 
marquis affluent repertoire doctoral, enthusiast. </p>
</article>

                    <article>
                    <h2>Heading</h2>
                    <p>Using cutlery fashion suite, portfolio guests fashion dynasty, wine rare 
investments a. Affluent sport noble first-class, sterling butler. European, townhome travel university, 
stockmarket in bonds art educated presidential le panoramic brokerage. Fashion with wealth le marquis townhome 
classical suite property auction purebred.</p>
</article>

                    </section>
</div> <!-- /end #content-->

   <div id="rightcol">

                    <aside>

                    <h2>Recent Posts</h2>
                    <h3>Subheading</h3>
                    <p>This is a short description.</p>
                    <h3>Subheading</h3>
                    <p>This is a short description.</p>
                    <h3>Subheading</h3>
                    <p>This is a short description.</p>

                    </aside>

                    </div> <!-- /end #rightcol-->

          <footer>
          <p><a href="http://www.everythingaboutweb.com">everything about web</a> &copy; 2012</p>
          </footer>

</div> <!-- /end #wrapper-->

</body>
</html>

Build a HTML5 Two Column: Add Layout & Style (CSS)

5. Add CSS for navigation, content, rightcol and style text

a. Add to body tag

Add font-family: Helvetica, Arial, sans-serif

b. Navigation code from Listamatic

http://css.maxdesign.com.au/listamatic/horizontal03.htm

c. Add padding to content div

padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;

Do you know why did the layout broke?

4. Add CSS to

#content h1
#content h2
#content p
#rightcol
#rightcol h2
#rightcol h3
#rightcol p
footer p
footer a

article, section, aside, hgroup, nav, header, footer, figure, figcaption
{
display: block;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

#wrapper {
width: 960px;
background-color: #FFF;
margin-left:auto;
margin-right:auto;
}

header {
height: 200px;
}

#logo {
}

nav {
width:960px;
}

/* Navigation code from Listamatic
http://css.maxdesign.com.au/listamatic/horizontal03.htm
*/

nav ul {
padding-left: 0;
margin-left: 0;
background-color: #209a9b;
color: #FFF;
float: left;
width: 100%;
}

nav ul li {
display: inline; }

nav ul li a {
font-size: 1em;
padding: 10px 16px;
background-color: #209a9b;
color: #FFF;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
}

nav ul li a:hover {
background-color: #999;
color: #fff;
}

.highlight a{
font-weight: 900;
color: #444;
}

#content {
padding-left: 40px;
padding-right: 40px;
padding-bottom: 20px;
float: left;
width:580px;
}

#content h1{
font-size: 24px;
padding-top: 25px;
}

#content h2 {
font-size: 18px;
padding-top: 25px;
font-weight: 200;
}

#content p{
font-size: 12px;
padding-top:15px;
line-height:16px;
}

section {
}

article {
}

#rightcol {
float: left;
padding-left: 40px;
width: 260px;
}

#rightcol h2 {
font-size: 18px;
padding-top: 25px;
font-weight: 400;
}

#rightcol h3 {
font-size: 16px;
padding-top: 25px;
font-weight: 200;
}

#rightcol p {
font-size: 12px;
}

aside {
}

footer {
clear:both;
height: 50px;
}

footer p {
font-size: 11px;
color:#333;
padding-left: 40px;
}

footer a {
color:#333;
text-decoration:none;
}

Here is a link to the final styled webpage:
http://www.everythingaboutweb.com/classes/examples/html5-two-column-style/