Basic CSS Page Layout

For my second post, I’ll build on my basic HTML page structure and give the page a basic layout. This post won’t go into detail for more complex things like navigation bars, etc.; I’ll limit it to creating the basic “boxes” where the content will be dumped.

Reset Styles

This is a debated technique, but I personally prefer to use a style reset (specifically I use a portion of “Reset Reloaded” by Eric Meyer)

/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0px;
 padding: 0px;
 border: none;
 outline: 0px;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}

I find that this saves me a lot of time and code (especially setting margin, padding, and border to nothing). I would normally specify these anyway, so it’s helpful at design time to know that I’m starting with nothing (rather than the browser default). I can then easily set different defaults for different sections of the page. For example, I can set ul and li margin, padding, etc., defaults for the #bodyText region without screwing up my navigation lists.

Page Regions

Now, I will get to the heart of the post, and set up the regions defined in my HTML structure.

Of course, you’ll want to substitute your own values

#container

The purpose of the #container region is to create the actual “page” that will be displayed over the <body>. I like to use a percentage width with a minimum and maximum width. So my CSS for a container div would look like:

/* container */
div#container {
   width:90%;
   margin:.75em auto;
   min-width:650px;
   max-width:70em;
   background-color:#FFF;
}
#header

Minimal styling is needed for the header box, as it usually is 100% width (default for a div). I find I usually have a header with a logo to the left or right. The height, then, is defined in pixels based on the image height. In this case, I used gradient background (I like PNGs with alpha transparency) so the background color shows through.

/* header */
div#header img {
   float:left;
   border:none;
   margin:5px 1em;
}
div#header {
   height:120px;
   background-image:url(images/headerGradient.png);
   background-repeat:repeat-x;
   background-position:bottom;
   background-color:#FFF;
}
div#headTitle {
   font-size:2em;
   height:120px;
   text-align:center;
   font-weight:bold;
   font-family:Cambria, "Times New Roman", Times, serif;
   padding-top:30px;
}

Note that I didn’t make the text in the heading (in this case, the site title) an <h1> tag, as I reserve the <h1> tag for the page title.

#mainNav

The #mainNav again usually is a 100% width, so it requires minimal styling. Occasionally, a height may need to be defined, but the most important thing is to clear any floats. So the CSS for this section is usually simply:

/* main navigation ids */
div#mainNavDiv {
   clear:both;
}

The rest of the styling will be applied to the <ul>, <li>, and <a> tags in the main navigation region.

#mainContent

OK, so this is getting to be kinda repetitive, but again, the primary elements that are needed are a background color (especially if it’s different than the container background color) and, you guessed it, clearing the floats from the #mainNav region. You can also set padding here to help arrange the other regions inside #manContent, but I prefer to use margins on the contained regions. No right or wrong here, just personal preference.

/* main content */
div#mainContent {
   clear:both;
   background-color:#FFF;
}
#secondNav

OK, now it gets a little more interesting. I generally have my second-level navigation on the left side, so we’ll need a width, margins, and a left float. I like to use an em for widths here, so the navigation menu expands as text size increases, so does the width of the region (this of course becomes somewhat less important as browsers increasingly rely on the zoom features, but I still think it’s preferable).

/* second-level navigation */
div#secondNav { 
   float:left;
   width:12em;
   margin:1.5em;
}
#bodyText

The main things we need here are margins and padding. Of course, since the #secondNav region is floated left, the text in the #bodyText region will wrap completely around the #secondNav; this can create a problem when #bodyText is longer than the navigation. So, to keep the main text properly aligned, we’ll need to set the left margin appropriately. Here’s what it might look like:

/* main text content */
div#bodyText {
   margin-left:15em;
   margin-right:1em;
}

OK, we’re back to a more boring one here, basically a clear; we’ll want to add maybe some padding, change text size, color, etc.

/* footer */
div#footer {
   clear:both;
   background-color:#999;
   text-align:center;
   padding-top:5px;
   font-size:.8em;
}

Final Product

OK, so I’ll combine it all here; here’s the basic css layout.

/* =Reset Styles - Thank you Eric Meyer (http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
 margin: 0px;
 padding: 0px;
 border: none;
 outline: 0px;
 font-weight: inherit;
 font-style: inherit;
 font-size: 100%;
 font-family: inherit;
 vertical-align: baseline;
}

/* container */
div#container {
   width:90%;
   margin:.75em auto;
   min-width:650px;
   max-width:70em;
   background-color:#FFF;
}

/* header */
div#header img {
   float:left;
   border:none;
   margin:5px 1em;
}
div#header {
   height:120px;
   background-image:url(images/headerGradient.png);
   background-repeat:repeat-x;
   background-position:bottom;
   background-color:#FFF;
}
div#headTitle {
   font-size:2em;
   height:120px;
   text-align:center;
   font-weight:bold;
   font-family:Cambria, "Times New Roman", Times, serif;
   padding-top:30px;
}

/* main navigation ids */
div#mainNav {
   clear:both;
}

/* main content */
div#mainContent {
   clear:both;
   background-color:#FFF;
}

/* second-level navigation */
div#secondNav { 
   float:left;
   width:12em;
   margin:1.5em;
}

/* main text content */
div#bodyText {
   margin-left:15em;
   margin-right:1em;
}

/* footer */
div#footer {
   clear:both;
   background-color:#999;
   text-align:center;
   padding-top:5px;
   font-size:.8em;
}

Basic HTML Page Structure

So, for my first post, I thought I’d start with the basics–how I lay out my basic HTML page.

Doctype/Basic HTML Tags

Of course, the first thing is to start out with an XHTML 1.0 Strict Doctype and all the required tags (this is what Dreamweaver spits out):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Page Divisions

Now that we have an HTML page, we need to divide the page up into sections. As a general rule, I use the following elements:

  • container div (which controls the width/placement of the page content over the background)
  • header
  • main navigation (usually horizontal navbar, but not necessarily)
  • main content (contains second navigation and body of page)
  • usually, a search box (if appropriate to the site, usually is)
  • second level navigation (omitted from the home page, usually a vertical navbar on the left)
  • body text (the primary content of the page)
  • footer

Here’s how I set it up:

<div id="container">
<div id="header"></div>
<div id="mainNav"></div>
<div id="mainContent">
  <div id="searchBox"></div>
  <div class="secondNav"></div>
  <div id="bodyText"></div>
</div>
<div id="footer"></div>
</div>

I use the “id” attribute because (1) there will be only one of each of those elements per page, and (2) it makes attaching and writing JavaScript and CSS much easier.
We’re almost there–just need to a basic shell for the navigation menus and some best practices for accessibility and usability.

Navigation Menus

We’ll go into more detail on navigation menus in a future post, but for now suffice it to say that the navigation menus will be unordered lists (<ul>) of links. So, we can add the following to the mainNav and secondNav divs:

<ul>
      <li><a href=""></a></li>
  </ul>

Of course, we’ll add more <li>/<a> tags when we develop our navigation, but this will work for now.

Best Practices

I follow as closely as possible the HTML Best Practices developed by the Illinois Center for Information Technology Accessibility, so we’ll need to add a few elements to enhance accessibility and usability:

HTML Language Declaration
We’ll add xml:lang=”en-US” lang=”en-US” to the <html> tag
Header Navigation
We’ll add an <h1> element first in the bodyText div. The text in the <h1> tag should match part of the <title> tag.
We’ll add a descriptive <h2> element before each navigation list.
Skip Navigation links
We’ll add an unordered list with links to key page elements. This is helpful for many alternative browsing technologies most notably mobile browsers and screen readers.
Right after the body tag, we’ll add:

<h2 class="hide">Skip Navigation/Accesskeys</h2>
<ul class="hide">
 <li><a accesskey="1" href="#bodyText" shape="rect">Skip to main content</a></li>
 <li><a accesskey="2" href="#searchBox" shape="rect">Skip to search</a></li>
 <li><a accesskey="3" href="#mainNavDiv" shape="rect">Skip to navigation</a></li>
</ul>

Final Code

So our final page starter code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Basic Page Layout</title>
</head>
<body>
<h2 class="hide">Skip Navigation/Accesskeys</h2>
<ul class="hide">
 <li><a accesskey="1" href="#bodyText" shape="rect">Skip to main content</a></li>
 <li><a accesskey="2" href="#searchBox" shape="rect">Skip to search</a></li>
 <li><a accesskey="3" href="#mainNavDiv" shape="rect">Skip to navigation</a></li>
</ul>
<div id="container">
<div id="header"> </div>
<div id="mainNavDiv">
<h2>Main Navigation</h2>
<ul>
 <li><a href=""></a></li>
</ul>
</div>
<div id="mainContent">
<div id="searchBox"> </div>
<div class="secondNav">
 <h2>Second Navigation</h2>
 <ul>
  <li><a href=""></a></li>
 </ul>
</div>
<div id="bodyText">
 <h1>Basic Page Layout</h1>
</div>
</div>
<div id="footer"> </div>
</div>
</body>
</html>