css layout with html5
Equal Height Boxes
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.
index.html, surround the sidebar and the content area in a new div with an ID of
boxes, so it looks like this:
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
Your page should now look like this:
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.