Crucial Web Hosting

A master layout and stylesheet contains semantic, optimized, cross-browser markup that is free of redundant tags, classes and IDs, hacks, conditionals, and separate stylesheets. Learn how to use a master layout and stylesheet to reduce CSS headaches and speed up your design process.

A couple months ago, we talked about using a master stylesheet to help cut down on CSS headaches, or at least speed up the design process for new sites. To go along with your master stylesheet, we will introduce a master layout, complete with semantic, optimized markup, free of redundant classes and IDs. To match our master layout, we will be expanding the CSS code as well. So let's get started.

Most website layouts today are made up of a core group of sections. There are slight variations for each section, like the order or number of sections, but if you are designing a layout for your site, it will probably have these sections:

1. Logo
2. Navigation Bar
3. Content
4. Sidebar(s)
5. Footer

The order of these sections is semi-important for a couple of reasons. If you picture a web page like a magazine, you know that every magazine you pick up is going to have a cover. You'll find the title of the magazine and maybe a short blurb or tagline of what kind of content you'll find inside. There's always a table of contents, articles, and a section at the end for credits and additional information.

Conventions

The above sections are conventions, and every medium has them. The web is no exception, and though it is a young medium, websites today have evolved heavily from sites in the early 90s.

You can expect the layout of one site to be similar to other websites, just like you can expect page numbers in a book. There are, of course, exceptions to this rule. No matter what medium you are in, you will always find deviations from the conventional in lieu of creativity.

Another reason for the order has to do with accessibility and search engine optimization. If you were to disable the stylesheet on your website, you should be able to read the page in a top-to-bottom flow, without jumping around.

As for search engines, they give more weight to content near the top. The markup you use should be appropriate for the content you are placing inside them.

Master Layout

So let's take a look at a basic version of the master layout:

<div id="wrap">
	<div id="header"></div>
	<div id="content"></div>
	<div id="sidebar"></div>
	<div id="footer"></div>
</div>

We combined the logo and navigation bar section into the header. The entire layout has been placed inside a wrapper, which will hold our layout together.

Currently, we use the DIV (and SPAN) tag around content that does not have a semantic equivalent. For example, you put paragraphs in a P tag instead of a DIV tag.

HTML5 will reduce the ambiguity of many tags with the introduction of layout-specific tags, such as header, nav, article, section, and footer.

Header

Our header section now has a spot for the logo and navigation bar. With no stylesheet enabled, you would be able to read this.

Search engines give more weight to certain tags, in this case, our H1 heading tag. The lower the number, the higher the priority search engines will give it.

The navigation bar is neatly wrapped in an ordered list, and you can check out our article about using PHP to achieve active navigation for this area.

<div id="header">
	<h1><a>Website Title</a></h1>
	<ol>
		<li><a>Item 1</a></li>
		<li><a>Item 2</a></li>
		<li><a>Item 3</a></li>
	</ol>
</div>

Visitors won't actually see the text in our heading tag, because we're going to use CSS to move it off the screen, and replace it with an image instead. We want the text there in case the stylesheet is disabled, or if we wanted to show it instead of the image for our printer-friendly stylesheet.

Content

Our content section has a spot for our page title, and like our logo text, it is wrapped in a heading tag. We will use the H2 tag here because we already used the H1 tag for the logo. Remember, we are going in order of priority here from greatest to least. If we were writing a paper, we would only have one title page, which is why we should reserve the H1 tag for one use.

<div id="content">
	<h2>Page Title</h2>
	<p>Some content goes here.</p>
</div>

The rest of the content section will be composed of paragraphs, sub-headings, lists, blockquotes, etc. Our sub-heading tags will be the H3 through H6 tags, but you'll probably only need to go as high as the H4 or H5 tag. These tags can, and will, be reused.

Sidebar

A sidebar is anything that holds content that isn't the primary focus of the site. You usually find helpful or related links, secondary navigation, advertisements, and other things in the sidebar.

Some layouts do not have a sidebar, while others have more than one. It all depends on the design, but for the sake of this article, we are going to have only one sidebar.

This can be positioned to the left or right of the content section using CSS, which is why we have it placed after the content. We also do this because it's not as important, and we want the most important information near the top of the page.

<div id="sidebar">
	<h2>Section Title</h2>
	<ul>
		<li><a>Item 1</a></li>
		<li><a>Item 2</a></li>
		<li><a>Item 3</a></li>
	</ul>
</div>

Footer

Lastly, we have our footer. This will have copyright information, and sometimes helpful links, usually related to the website itself, like a link to your contact, policy, and advertising pages. You also see RSS feed icons here and perhaps a link back to the top of the page so visitors don't have to scroll.

<code><div id="footer">
	<p>Copyright Information</p>
</div>

Putting It Together

And now let's take a look at the complete layout, and then the CSS code that will set everything up nicely.

<div id="wrap">
	<div id="header">
		<h1><a>Website Title</a></h1>
		<ol>
			<li><a>Item 1</a></li>
			<li><a>Item 2</a></li>
			<li><a>Item 3</a></li>
		</ol>
	</div>
	<div id="content">
		<h2>Page Title</h2>
		<p>Some content goes here</p>
	</div>
	<div id="sidebar">
		<h2>Section Title</h2>
		<ul>
			<li><a>Item 1</a></li>
			<li><a>Item 2</a></li>
			<li><a>Item 3</a></li>
		</ul>
	</div>
	<div class="clear"></div>
	<div id="footer">
		<p>Copyright Information</p>
	</div>
</div>

Cross-Browser Note

We have added an empty, cleared DIV after the content and sidebar "row" so Opera, Safari, and Firefox will actually apply the margin we set on the footer in our stylesheet.

.clear {
clear:both;
height:0;
}

Without this redundant tag, these browsers would not interpret the margin for the footer, and would place it directly after our floated row with no spacing. Internet Explorer is the only browser that handles this without this redundant tag (which makes the most sense, oddly enough).

One thing should be pointed out though, when we add the empty DIV to our markup, every browser except for Internet Explorer 6 will have a 50 pixel margin above the footer. It will add 22 more pixels to the margin, giving us 72 pixels from the top of the footer.

We could leave the height attribute off of this class so it worked in Internet Explorer 6, but then Opera would not apply any spacing.

You could also add a margin or padding to the bottom of the content and/or sidebar sections, but Internet Explorer will add 30 more pixels to the spacing above the footer, instead of the 50 in Opera, Safari, and Firefox.

If the extra pixels in Internet Explorer are that big of a concern to you though, there are a couple things you can do. One way is to use PHP to search the user agent string that each browser outputs. We will look for MSIE, and if it finds this, we will have PHP output nothing, otherwise it will output a BR tag that has been cleared:

<? if(!ereg('MSIE', $_SERVER['HTTP_USER_AGENT'])): ?>
	<br clear="all" />
<? endif ?>

That means we will be removing the empty DIV tag, and only output a BR tag if we're in a browser besides Internet Explorer, since it does not need anything to be there.

The rest of the markup is fine, and this is 100% cross-browser compliant. No CSS hacks, conditionals, or separate stylesheets. We simply do not need them, and you should never have to.

Once you have a full understanding of HTML markup, how to use tags for their intended purpose, and a fundamental understanding of how CSS works, you will not have to resort to using hacks. Keeping your code clean, simple, and semantic will get you started in the right direction, especially if you use a master stylesheet.

Semantic Markup

What you should notice is that we are not using a lot of pointless classes and IDs on our markup. There's no need to, because we can use the parent tag for each section to define how everything inside of it will look. The less classes and IDs you can assign to markup, the better. By using the intended tags, we are also writing semantic code. This has many advantages, which we will discuss below.

Search Engine Optimization

Search engines look at your code. They determine what is important on your page based on the tags you use. We talked about this earlier with the logo and page title heading tags. Don't overdue it though! You can't wrap everything in a heading tag and except great results. That isn't the point here.

Maintenance & Updates

The cleaner your code is, the easier it is for you to maintain, update, and style. If you want to give your site a new look, it will be much less time-consuming. You'll already have the content in place and in an appropriate fashion.

Other Devices

By using semantic markup, you allow other devices, like mobile phones, to interpret your site appropriately if they cannot read your stylesheet. Some mobile devices don't even apply your stylesheet, which is why we said earlier that you should be able to read your site in a top-to-bottom fashion and it should still make sense. It will also allow future devices to work with your code.

If you're an Opera user, hit Shift + F11 to enable the Small Screen view. You'll get an idea of what your site looks like with minimal styling applied.

Accessibility

Screen readers will have a much better time reading your page, making your site more accessible to people with disabilities, particularly users with poor or no vision.

Other Reasons

There are other advantages to using semantic markup, but those are the main ones. We will have a future article that goes into more detail about this.

HTML is a language, and like any language, you need to understand how to properly use and "speak" it. If you can't "spell" correctly, or don't use "commas" and other "punctuation" as they were intended, you can end up with some pretty disastrous results:

1. I helped my uncle jack off a horse.
2. I helped my uncle, Jack, off a horse.

Ok, maybe it's not that extreme, but you get the point.

CSS

We will be using a stripped down version of our master stylesheet. The zip file and live version of this example code—which can be found at the end of the article—will have all of the CSS properties in it, such as styling for headings, links, forms, and tables.

/***** Wrapper *****/
 
#wrap {
width:800px;
margin:0 auto;
}
 
/***** Header *****/
 
#header {
margin:0 0 30px 0;
border-bottom:1px solid #ccc;
padding:20px 0 0 0;
}
 
/***** Logo *****/
 
#header h1 {
padding:0 0 20px 0;
text-indent:-2000px;
}
 
	#header h1 a {
	width:246px;
	height:35px;
	display:block;
	background:url(logo.png) no-repeat;
	}
 
/***** Navbar *****/
 
#header ol {
height:30px;
margin:0;
padding:0;
list-style:none;
}
 
	#header ol li {
	display:inline;
	}
	 
		#header ol li a {
		float:left;
		color:#555;
		height:25px;
		margin:0 5px 0 0;
		border:solid #ccc;
		border-width:1px 1px 0 1px;
		padding:5px 25px 0 25px;
		background:#ddd;
		text-decoration:none;
		font-weight:bold;
		}
		 
			#header ol li a:hover,
			#header ol li a.active {
			color:#000;
			background:#ccc;
			}
		 
		#header ol li a.active {
		background:#fff;
		}
 
/***** Content *****/
 
#content {
float:left;
width:505px;
border-right:1px solid #ccc;
margin:0 40px 0 0;
padding:0 40px 0 0;
}
 
/***** Sidebar *****/
 
#sidebar {
clear:right;
float:left;
width:214px;
}
 
	#sidebar h2 {
	color:#555;
	padding:0;
	font-size:1em;
	font-weight:bold;
	letter-spacing:normal;
	}
	 
	#sidebar ul,
	#sidebar ol {
	padding:0 0 1.35em 0;
	list-style:none;
	}
 
/***** Footer *****/
 
#footer {
clear:both;
color:#777;
border-top:1px solid #ccc;
margin:50px 0 0 0;
padding:10px 0 15px 0;
font-size:0.8em;
}

Organization

Our stylesheet follows the flow of our HTML markup. It's very important to keep your stylesheet organized, because it will make your life that much easier—and anyone else's who has to work on your code. Each section has been split up with a comment so we know where we are.

Indent

You will also notice that some code blocks are indented. For example, our sidebar section has the main sidebar DIV, and any element that is a child of the sidebar will be indented.

If you have elements that are grandchildren, or children of children, then those are also indented, like in our navbar section with the ordered list and anchor tags. We indent HTML markup like this, so why not our CSS?

Keep It Simple

The important thing here is that we're not assigning unnecessary classes and IDs to elements in each section. Our parent tag is doing all the work here. This keeps our HTML markup clean, and makes it easier to maintain and even redesign the site.

What It Looks Like

Now that we have the HTML markup and CSS done, let's see how it looks. The first screenshot has colored overlays on each section to show where they are. The gray areas would be space created by padding or margins. The second screenshot is what you would see in your browser. You can also view the live version of this page.

Download

You can download the zip file that contains the HTML, CSS, and logo.

Conclusion

This is just an example master layout. The point of this layout was more about showing how to keep your code clean, optimized, and semantic, while still being cross-browser compatible.

When used in a combination with a master stylesheet, you will find that it's much easier and faster to knock out sites, and that you'll have less CSS headaches.

We encourage you to come up with your own master layout and stylesheet, but to use this as a base or example to start from.

If you have any questions or comments, we would love to hear from you. Thanks for taking the time to read this, we hope you enjoy it and find it useful!

Save. Share. Submit.

• Digg · 
• Twitter · 
• StumbleUpon · 
• Delicious · 
• Facebook · 
• Google · 
• Reddit · 
• Technorati

Related Articles

If you liked this article, be sure to check out the following:

• Master Stylesheet: The Most Useful CSS Technique