css layout with html5

index2.html and css/style2.css

One obvious remaining problem is that you can see the default white page background color where the shortest content box ends. If we later disable our temporary/starter colors so the content area is white, it won't be a problem - the user will never see it. But let's assume for a moment that we intend to keep the current color of the content area background.

This is a bit of a sticky problem for CSS, and there are many possible solutions out there. Some involve using JavaScript or JQuery, while others are pure CSS. While it would be nice to stick with pure CSS, those solutions are considerably more difficult, and there's nothing significant lost by using a Javascript solution. Since the boilerplate template already loads in JQuery, we're halfway finished.

First, in index.html, surround the sidebar and the content area in a new div with an ID of boxes, so it looks like this:

The Javascript will examine the height of all boxes inside this container, determine which one is tallest, and set the height of the other boxes in it to the same height. And the cool thing is, it will do all of this at run-time, so it will work with any amount of content in either box. Conveniently, our HTML5 boilerplate comes with a JavaScript plugins file, read to modify. Open up js/plugins.js, scroll to the end, and paste in the following:

To activate the script, paste this into the bottom of your index.html document, just before the closing </body> tag:

Your page should now look like this:

Did it work? Now try reversing things - add more content to your shortest column to make it the longest. Refresh the page and it should still work. Problem solved! And if someone doesn't have Javascript enabled, the worst that will happen is that they'll see a bit of the wrong color behind one of your boxes (people surfing with Javascript off in 2011 are used to things being broken all over the place).

That's it! We've got a basic CSS layout in place. Time to doll things up.

Extra credit: To test whether you've got a good handle on what we've done so far, try moving your sidebar to the left-hand side of the page.