css layout with html5

index1.html and css/style1.css

Take a look at index1.html in your editor, and notice that it has three main sections: A <header> container, a <div id="main"> and a <footer> (note the use of the new HTML5 tags header and footer.) All are wrapped in a <div id="container">. The site we're building will also have a navigation section and a sidebar. In order to prevent everything on the page from being invisible, we need a tiny amount of text content in each section as well. So modify the "container" section of the boilerplate so it looks like this:

Notice that we've also replaced <div id="main"> with <section id="main"> . People differ on whether the new <section> tag should be used in this way - some feel that <section> should be reserved for repeating sections of a page rather than to denote a whole content area like this. Your choice, but please stick with this usage for this tutorial.

Just to keep up good habits, be sure to put something in the <title> container - it's easy to forget and later end up with a document that shows up in search results as "Untitled Document." Refresh the browser and you'll see nothing but your filler words. Let's add some colors to our major elements so we can see what's going on.

Now take a look inside of style.css. Whoa, that's a lot of stuff! Here's where html5boilerplate is doing a ton of heavy lifting for you, taking care of cross-browser incompatibilities so your page looks as close to identical in as many browsers as possible. Search the document for "Primary styles" about 3/4 of the way down. There's a blank space where we'll be adding our own styles, overriding any default provided styles. We'll be working in the Primary Styles section throughout this tutorial.

Add the following simple style rules:

Isn't it nice being able to call those sections by their actual, semantic names rather than specifying lots of arbitrary IDs and classes? Save the stylesheet and the HTML and refresh your browser. You should see something like this:

Things are going to look ugly for a bit, but don't worry - our design will come together soon.

Let's give some of these elements starter heights so we can start to visualize the layout. Modify these sections of the CSS:

Before we move on, let's add some filler text to the content area and sidebar in index.html so we can see how they behave when we start to lay them out. Replace the text in the main content area with two paragraphs of filler text. If you're using TextMate, type the word "lorem" then hit the tab key, or use your favorite lorem ipsum site to generate it for you - I used Hipster Ipsum here because I'm tired of reading Latin all the time :)

Be sure to wrap your filler text paragraphs in <p> tags!

In the sidebar section, let's create two short lists, with H2s as headers:

As soon as you refresh the page, you'll notice something unexpected - gaps of white between some of the sections where you expected color to be.

Using your favorite debugging tool (in my case Chrome's WebKit Inspector, though you may prefer Firebug for Firefox ), we can see what's causing this:

As you roll over the second paragraph, notice that its containing box extends below the bottom of the text, into no-man's land (hence the white gaps). The panel on the right says that the User Agent Stylesheet is putting 1em of margin above and below the paragraph. In other words, we're seeing the browser defaults here. But wait - we don't WANT all of our text crammed up against the sides of their containers, right? Let's create a rule that will create padding in the main content section, sidebar, and footer. This will not only make the text look more "comfortable," but it will also have the effect of overriding the browser's default style that created those weird gaps. We can kill two birds with one stone! Since we can conveniently combine selectors into single rulesets using the CSS "comma" syntax, this is easy. Add this:

(It's OK that we already have a section#main rule earlier in the stylesheet - these will be changing. Much nicer!

Now, since we don't want our design stretching full-width across the browser, let's give the content area a width, and center it on the page. Add this below your custom styles:

div#container means that this ruleset will apply to any div tag with an ID of "container," thus matching the wrapper div that came with the boilerplate. We chose 960px because most monitors out there have a resolution of 1024px or wider. Since browser scrollbars take some of that horizontal width, 960px is a common conventional width for contemporary web designs.

margin:auto; is the magic incantation that causes unspecified margins to be calculated automatically and equally. The end result is that the containing div is centered on the page. We add some top margin to give the design some breathing room.

Let's get our content area and sidebar lined up. We know that our container is 960px wide. Let's say we want our sidebar to be 200px wide, leaving 760px for content and nice wide videos. Modify your section#main and aside rules like this:

What you end up with is this:

A start, but not quite what you're looking for. Right now, all block-level elements are in the normal "document flow," so they're stacked on top of one another. We can disrupt the document flow by "floating" the two elements. When an element is floated, either to the left or right, it's placed up against the left or right side of the box its in, and content flows around it. Try making these changes:

But wait! Why aren't the content area and sidebar floating side by side? Do they not fit into the 960px container? 760 plus 200 is 960, right? Yes, but that's not the whole story. When dealing with boxes in CSS, always remember that the total width of a box is:

Total box width = box size + margins + padding + border widths

Memorize this! It will bite you if you don't. So... remember that earlier we put 10px of padding on section#main and aside. That means that in reality, both boxes are 20px wider than specified - the sidebar is actually 220px wide, and the content area is actually 780px wide. Added together, they don't fit into the 960px container. To clarify this for yourself, bring up your trusty Firebug or WebKit Inspector and roll over the divs, studying their dimensions.

So we need to shave 20px of width from the specified dimensions of the sidebar and content area. Change them like this:

Cool! It's working, but what happened to the footer? The problem is that it's been swallowed up by the two floats, both of which contain content taller than the height of the footer. While it might be tempting to solve this by specifying heights for the content area and sidebar, don't! You have no idea how much content is going to be in those sections, and you want to be flexible enough to accommodate any amount of content.

The right solution is to "clear" the footer. The "clear" declaration tells an element to not start appearing until the object to the left, the right, or on both sides has finished drawing. Most of the time you'll want to clear on both sides. Modify your footer CSS like this:

Excellent - this is starting to look like a real web page.