How to Design and Code a Flexible Website

In this tutorial, we're going to be designing and coding a simple blog-style web-page. We'll pay special attention to making our design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

Tutorial Details

Difficulty: Easy
Estimated Completion Time: 1.5-2hrs

Step 1

So our example web page is going to be based on a simple blog theme, with a WordPress blog-like structure similar to that of the nettuts homepage. It's going to look something like this:

The idea here is not for you to reproduce my example, but for you to be able to follow along and apply the techniques to your own designs, hopefully learning a thing or two about the underlying concepts.

Step 2 - Photoshop

We're going to keep the Photoshop use here to a bare minimum, Usually I mockup an entire design in Photoshop before coding, but here I'm just going to generate a basic layout, and worry about the content later. This is an example of a different workflow, it will make more sense as we go along.

Note: Some readers have asked about using the GIMP. I haven't used it personally, but I'm sure you can accomplish the following steps in GIMP just as easily, because all we're using is basic shapes and gradients.

Page Layout

I decided to make the page 900px wide, so my document is 1000px wide and 1200px long (don't know why I gave myself so little room, make yours wider if you like). Place guides at 50px and 950px to get a 900px wide area. We're going to have a content area and a sidebar, and the content area is going to be 600px wide, so place another guide at 650px.

Backgrounds

The header background is just three rectangles for the top links, main header, and navigation area. I used shape layers and added gradients to the layer styles. There are also 1px borders between the top bar and header area, and between the header and navigation area.

The footer background is another gradient, but this time with a 2px border at the top.

Next add a background for the sidebar, I chose #d8ddd1.

Type Tool

Next we Grab the type tool (T) and add in a logo and tagline, and some basic navigation links. Fonts:

Blog Title:

Font: Myriad Pro
Size: 48pt
Color: #ffffff (white)

Blog Description:

Font: Myriad Pro
Size: 24pt
Color: #ffffff

Main Navigation Links:

Font: Arial
Size: 18pt
Color: #2b2b2b

"welcome, guest" and "stay updated":

Font: Arial
Size: 12pt
Color: #fffff

"login, Sign Up" and "subscribe via...":

Color: #a5bf8d
Style: underline

Content

We're only going to include one sample "post" in our Photoshop mockup, because I find working with type in Photoshop is a real pain, but we'll get into more detail about styling the content section later. The fonts I'm using for the dummy post are:

Post Title:

Font: Arial
Size: 24pt
Color: #3c3f40
Style: Bold

Date, category and author info:

Size: 11pt

Paragraphs:

Size: 12pt

Okay, we're pretty much done with our mockup. All we need to do now is slice it up and save for the web.

Select the slice tool (C) and cut out skinny slices of each of the background rectangles: the top bar, the header area, the navigation, and the footer. Don't include the borders, we're going to add those in with CSS. Try zooming in really close to make sure you get the right parts. The slices I cut are about 5px wide, but the width isn't terribly important at this point.

Select 'File/Save for web and devices...' Hold down "shift" and click to select each slice. From the dropdown menu "presets" select "jpeg . Uncheck "convert to sRGB"" (I find that the conversion dulls the colors). All other settings should be left at defaults. Click "Save." In the popup window, make sure "selected slices" is displayed in the "slices" dropdown menu, and click save.

GIMP users: I'm not sure if gimp has a tool like slice, but you just need to make rectangular selections, save them to separate documents, crop them down, and save them as optimized jpegs.

For a more in depth look at the slicing and saving process, see My previous tutorial.

Step 3 - HTML Setup

If you're unfamiliar with the process of organizing files and folders for a webpage, again, see my other tutorial linked above.

Open up your favorite code editor, and create a new file called index.html.
We're going to try to use as few div tags as possible to keep our markup meaningful and semantic. That being said, to maintain a flexible, resizable layout, we need to enclose some elements in multiple divs. More on that later.

All elements in our page will be contained within two divs, called "main" and "footer". Within the "main" div, we're going to have a divs for the top bar, the header, and the content area. The footer is going to contain an inner div for the written content.


	<!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" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<title>My Blog</title>
	</head>
	<body>
		
		<div id="main">
			
			<div id="top_bar">
			</div><!-- end top bar -->
			
			<div id="header">
			</div><!-- end header -->
			
			<div id="content">
			</div><!-- end content -->
		
		</div><!-- end main -->
		
		<div id="footer">
		
			<div id="footer_content">
			</div><!-- end footer content -->
		
		</div><!-- end footer -->
	</body>
</html>

Top Bar

The background of the blue bar at the top stretches the entire width of the page, but the two text areas need to be within the 900px of the page. To achieve this, we need the content to be contained within another div, which will have a class of "container".
Within our bar at the top, we're going to have two paragraphs, one for the login, one for the subscription options. Since they're going to be floated, each needs to be given a unique id. Actually, if we wanted to be totally semantic, we could code these two paragraphs as an unordered list with two list items. Try it both ways, see if you can make it work.


<div id="main">
			
	<div id="top_bar">
		<div class="container">
			<p id="login">Welcome, Guest <a href="#">Login</a> <a href="#">Sign Up</a></p>
			<p id="subscribe"> Stay Updated: <a href="#">Subscribe via RSS</a> <a href="#">Email Updates</a></p>
		</div><!-- end bar container -->
	</div><!-- end top bar -->
			
	<div id="header">
		</div><!-- end header -->
			
	<div id="content">
	</div><!-- end content -->
		
</div><!-- end main -->

Step 5 - Header

We face the same issue here as we did with the last step, the background image needs to stretch out indefinitely. To contain the content, we need to place it within another div. Since the header will also be within our centered, 900px wide page, we can re-use the "container" class. The title of the blog will be wrapped in an <h1> tag, and the description/tagline will be a paragraph with a unique id.



<div id="header">
	<div id="branding" class="container">
		<h1>My Blog</h1>
		<p id="desc">Description of My Blog</p>
	</div><!-- end branding -->
</div><!-- end header -->

Navigation

Also inside the header is the navigation menu, which will be wrapped in an unordered list with the id of "menu", which will all be wrapped within another div with the id of "navigation".
Because we want the navigation menu to be centered, we can add our "container" class to the ul as well.

1
2	<div id="header">
3
4	<div id="branding" class="container">
5	<h1>My Blog</h1>
6	<p class="desc">Description of My Blog</p>
7	</div><!-- end branding -->
8
9	<div id="navigation">
10	<ul id="menu" class="container">
11	<li><a href="#">Home</a></li>
12	<li><a href="#">About</a></li>
13	<li><a href="#">Blog</a></li>
14	<li><a href="#">Contact</a></li>
15	</ul>
16	</div><!-- end navigation -->
17
18	</div><!-- end header -->

We're writing the navigation links in lowercase here, but in our CSS file we will transform them to uppercase. You could write them in capitals here, but my caps lock key is broken, and this way makes for cleaner markup.

Step 6 - Content

The content area doesn't have a background image or color, so we don't need to enclose it in an additional div. To center it, we can give the content div a class of "container" as well. Inside the content div, we have two more divs, one for the blog posts, and one for the sidebar.

When designing a blog, we need to take into account the fact that the content is going to change, and may include any number of elements, including lists, images, quotes, headings and emphasized text. To prepare, we need to style every possible element that might appear., so our sample content needs to include Everything. This is sometimes called the "Sandbox method." To get dummy content, I suggest visiting HTML Ipsum.

We're going to separate our sample content into a couple different posts, with titles wrapped in <h2> tags. Each post will also have standard information about date, author, etc, contained within a <small> tag.


<div id="content" class="container">
	<div id="posts">
		<h2>Don't Cancel Chuck!</h2>
		<small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
		Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
		Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</p><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. 
		Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, 
		at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		<a href="#">Read More</a></p>
				
		<h2>Alien Spacecraft found in New Mexico</h2>
		<small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small>
		<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
		Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
		Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
		<ul>
   			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
  			<li>Aliquam tincidunt mauris eu risus.</li>
 			<li>Vestibulum auctor dapibus neque.</li>
		</ul>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
		Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				
		<h2>Ghostly Goo in your Kitchen Sink?</h2>
	    <small>on July 01 in <a href="#">General</a> tagged <a href="#">petitions</a> by <a href="#">admin</a></small>
	 	<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. 
	    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. 
	    <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, 
	    ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
		<h4>Header Level 4</h4>
	    <ol>
   			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   			<li>Aliquam tincidunt mauris eu risus.</li>
		</ol>
		<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. 
		Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, 
		at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
		<h3>Header Level 3</h3>
		<ul>
			<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   			<li>Aliquam tincidunt mauris eu risus.</li>
		</ul>
		<ol>
			<li>Lorem ipsum dolor sit amet</li>
			<li>Consectature vestiblum</li>
		</ol>
			
	</div><!-- end posts -->
			

</div><!-- end content -->

Step 7 - Sidebar

In a typical blog, the sidebar holds various widgets, which display links to other pages or articles, and each widget is usually an unordered list of anchor tags. Here, we're going to have "categories", "recent posts" and "archives" widgets. So our sidebar div will contain three lists, each with a title wrapped in an <h3> tag.

1
2	<div id="sidebar">
3
4	<h3>Categories</h3>
5	<ul>
6	<li><a href="#">General</a></li>
7	<li><a href="#">Ghost Sightings</a></li>
8	<li><a href="#">UFO Crashes</a></li>
9	<li><a href="#">Government Coverups</a></li>
10	<li><a href="#">International Conspiracies</a></li>
11	</ul>
12
13	<h3>Recent Posts</h3>
14	<ul>
15	<li><a href="#">Ghost Sighting in Mansion</a></li>
16	<li><a href="#">UFO picked up by satelites</a></li>
17	<li><a href="#">Mutants amoung us?</a></li>
18	<li><a href="#">Bigfoot: Fact or Fiction?</a></li>
19	</ul>
20
21	<h3>Archives</h3>
22	<ul>
23	<li><a href="">June 2008</a></li>
24	<li><a href="">May 2008</a></li>
25	<li><a href="">April 2008</a></li>
26	<li><a href="">March 2008</a></li>
27	</ul>
28
29	</div><!-- end sidebar -->
30
31	</div><!-- end content -->
32
33	</div><!-- end main -->

Step 8 - Footer

The footer will work like the top bar, header, and navigation worked, with an outer div to hold a repeating background, and an inner div to centre the content and contain it within the 900px of our page. To do this, we just need to add the "container" class to our "footer content" div.

Our footer is going to have three columns: copyright info, links, and subscription options. Each will have to be contained within its own div.


<div id="footer">
		
	<div id="footer_content" class="container">
				
		<div id="copyright">
			<p>Copyright © 2009.<br /> All Rights Reserved.</p>
		</div>
				
		<div id="links">
			<h4>Links</h4>
			<ul>
				<li><a href="#">PSDtuts - Photosohp tutorials</a></li>
				<li><a href="#">NetTtuts - Web development and design tutorials</a></li>
				<li><a href="#">VectorTuts - Illustrator and vector tutorials</a></li>
				<li><a href="#">FlashTuts - Adobe Flash tutorials</a></li>
			</ul>
		</div> 
				
		<div id="feeds">
			<h4>Follow our updates</h4>
			<ul>
				<li><a href="#">Subscribe to RSS Feed</a></li>
				<li><a href="#">What is RSS?</a></li>
				<li><a href="#">Email Updates</a></li>
			</ul>
		</div>
				
				
	</div><!-- end footer content -->
		
</div><!-- end footer -->

Okay, we're done our markup! Lets take a look in the browser (I'm using Safari 4, which is awesome, by the way)

It doesn't look like much, but it has all our content laid out in a logical, readable way. It's important that an un-styled web page contains all the information needed for a reader to be able to understand and navigate the page easily. This ensures that anyone browsing with CSS disabled, or using a specialized browser (like a screen reader for visually impaired people), will still be able to access and understand content. Keeping this in mind will also ensure a logical layout, which will be easier to modify later.

Step 9 - CSS

Now comes the fun part: giving our page some style. Prepare yourself - to achieve the layout we want, we're going to have to face some confusing little CSS headaches. I'm going to try to explain the underlying concepts that lead to these problems, so that you not only learn how to solve them, but also gain a better understanding of how CSS works and how to deal with any problems you might come up against. Let's get started!

Create a new document "style.css" and link to it in the head of your html document:


<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
		<title>My Blog</title>
		<link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 
</head>

Step 10 - Basic Clean-up

First off, we need to know what we're working with, which means getting rid of default browser styles.

We're going to use a simple css reset to get rid of those pesky margins and styles:

1
2	body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, img, form, fieldset, blockquote {
3	margin:0px; padding:0px; border:0px;
4	}

We also have the wrong font for our whole page, lets fix that:

1
2	body {font-family: Arial, helvetica, sans-serif; }

The next step is kinda neat: remember how we added the "container" class to all divs that had text content? It's time to get that container to contain our content! Like I said before, we're making our page 900px wide, and we need out content to be centered.

1
2	.container {width: 900px; margin: 0 auto; }

And just like that, we have a nice 900px wide, centered webpage.

Step 11 - Starting at the Top

We're going to start at the top with the small blueish bar containing the subscription and login links. Okay, the first thing we notice about our two paragraphs at the top is that they're supposed to be beside each other, not on top. To do this, we need to float the elements.

How floats work

When we look at our webpage in the browser, we see a bunch of elements of different widths and heights. The browser, however, sees only a bunch of boxes stacked on top of one another, with each element taking up the entire width of the container. The webpage has a very simple "flow": each element is pushed down the page by the element above it.
To get two elements to sit next to each other, we need to take them out of the normal "flow" of the page.

When an element is floated, a few things happen: it gets stuck to the side of the page (or another element) and it is removed from the normal flow of elements - that is, instead of taking up the entire width of the page, it only takes up the space it directly occupies, allowing the elements below it to move up beside.

Lets try it with our two little paragraphs:

1
2	p#login {float: left; }
3
4	p#subscribe {float: right; }

Take a look in the browser, and we have a problem! The h1 logo has moved itself up between the two floated items. When you float elements, it's like you're telling them to "break the rules", the only problem is, when you let some elements break the rules, other elements start doing it too! What we need is a way to tell the browser that these two paragraphs, and these two paragraphs ONLY, are allowed to break the rules, so after the floated elements, the normal flow is restored. To do this, we need to add a rule to the parent div of the two floated elements, which lets the two paragraphs inside it float without affecting the rest of the page.

To do this, we need to add a property to the containing div of "overflow" and set the value to "hidden".

1
2	#top_bar {overflow: hidden; }

It's not terribly important to understand what's overflowing, or where it's hiding, so long as you understand that the overflow: hidden rule controls the behavior of floats within the div. Now, I don't want to confuse or scare anybody, but this technique doesn't always work in all browsers. It works here, but always test in IE for your own designs. There are a number of other techniques worth noting, all of them have their advantages. Peter-Paul Koch describes a method similar to the one I use here in his article Clearing floats. Steve Smith describes his method of "Floating (Nearly) Anything" in his post Clearing Floats: The FnE Method. Also, it's a bit more of an advanced technique, but Tony Aslett has pioneered a rather ingenious and devious technique, described in the article How To Clear Floats Without Structural Markup. Choose the method that works best for you, and remember to test your browsers!

One more important thing about floats is that you should always specify a width. Your CSS will still validate if you don't (you will get a warning) but it's best practice and you sometimes wind up with unexpected results in some browsers if you don't.

Since we want our layout to be easily resizable, we're not going to use pixel values, we'll use percentages instead. We may as well let each element take up 50% of the width. Because we've given it so much space, the subscribe paragraph has moved to the left. We can get it to stick to the right again by specifying text-align: right.

1
2	p#login {float: left; width: 50%;}
3
4	p#subscribe {float: right; width: 50%; text-align: right; }

Styling the paragraphs

Before adding a background image, I like to style the fonts so that I can see how much space I have to deal with.

Font sizes using ems

We want to make our web page as accessible and flexible as possible, to reach the largest possible audience, right? That includes allowing readers to resize text to a comfortable size. Now, different browsers deal with resizing in different ways, but as usual, the problem browser is IE/Win. In Internet Explorer, if your text size is set in pixels, you can't resize it, so your reader is stuck with whatever font size you've specified. That's not very nice, especially for readers with poor vision. To correct this problem, we need to use a different unit - ems.

Ems are a relative size unit - it means the width of the "m" in whatever font-size is specified. The default size set by browsers is 16px, so 1em would equal a font-size of 16px.

To make our web page fully scalable, we can convert all our font sizes to ems. An easy way to do this is with the web application Em Calculator (works best in FireFox).

However, to avoid doing any confusing math, there's an easier way. Since ems are relative to the default font-size of the page, if we change the default, the em values will be different.

To make the math easier, we can give ourselves a base of 10, by setting the default font to 10px instead of 16. To do this, we just specify in our CSS file that we want our fonts to be 62.5% of the default.

1
2	body {font-family: Arial, helvetica, sans-serif; font-size: 62.5%; }

Now we just need to divide each font size in pixels by 10, and we have our em value. To start, the font size for our two <p> tags at the top of the page is 12px, which works out to 1.2ems.

1
2	#top_bar p {font-size: 1.2em; color: #ebf0e8;}
3
4	#top_bar a {font-size: 1.2em; color: #a5bf8d;}

Expandable backgrounds

Next, we add in the repeating background image we sliced from our PSD:

1
2	#top_bar {overflow: hidden; background: url(images/bar_slice.jpg) repeat-x; }

We need to add a bit of padding to the top and bottom of the paragraphs to make the image stretch to its full height. To get the right values, we need to go back to our PSD and measure the height of the bar with the ruler tool: mine turns out to be 26px tall. Since our text is 12px tall, the total padding will be 26-12 or 14px. This means we add 7px of padding to the top, and 7px to the bottom. (These values are sometimes off by a pixel or two, but are a good place to start, just keep checking in your browser)


#top_bar {
	overflow: hidden; 
	background: url(images/bar_slice.jpg) repeat-x; 
	padding-top: 7px; 
	padding-bottom: 7px; 
}

We could also get the div to stretch to its full height by specifying a height of 26px, but you should always avoid specifying a height for your elements as much as possible, to allow for maximum flexibility. If you restrict your element to a specific height, you aren't allowing for larger text or additional content.

Check it out, it looks just like our PSD. But here's where things get tricky: try re-sizing the text in your browser. When we increase the size of the text, the ratios change, we lose our bottom padding, and the text eventually overflows beyond its background. To make a more "indestructible" web site, we need to get the background to stretch as the text grows or as more content is added, so that there is always 7px of padding at the top and bottom, no matter how big the text is. Since our background image is only 26px tall, we need to have something else to stretch out further. What we're going to do is basically put a solid color behind the image, so that when the text gets bigger and the image can't contain it, the color behind it shows through. The color at the bottom of our gradient is #08413c. So lets add that to our background. To specify that we want the image to always stick to the top of the element, so that the color stretches out from the bottom, we add a background-position value after the image url.

1	background: #08413c url(images/bar_slice.jpg) top repeat-x;

Now try resizing the text: the background grows with it, and it looks pretty much the same as it gets bigger. This also lets us know that if we wanted to add a second line of content later on, we wouldn't have to change anything in our css. The ability of an element to expand for more or larger text is often overlooked in web development, and this causes pages to break down when text is resized. Just check out my University's Homepage, try making the text one step bigger, and you lose a navigation link!

One more thing, we just need to add that 1px border to the bottom of our bar:

1	border-bottom: 1px solid #7ab7b7;

So here's where we're at so far:

Step 12 - Header

Since we're going to be making the text of our blog name and description white, lets add in the background first. We probably won't need this image to stretch out, but just in case, we'll repeat the same process of adding a background color and position:

1
2	#header {
3	background: #01835f url(images/header_slice2.jpg) top repeat-x;
4	}

Now lets do our font styles:


h1 {
	font-family: "Myriad Pro", arial, sans-serif; 
	color: #fff; 
	font-weight: normal; 
	font-size: 4.8em;  
	padding-top: 25px; 
}

p.desc {
	font-family: "Myriad Pro", arial, sans-serif; 
	color: #fff; 
	font-size: 2.4em; 
}

Alright, so now we need to get our description out beside our logo. This can be achieved by floating, but I tried it and ran into problems with specifying widths, and I managed to get a much better result using absolute positioning. Plus it gives me a chance to explain an important concept!

Absolute Positioning

If we want to position an element outside the "flow" of the page without using floats, we can use absolute positioning, which basically allows you to position an element anywhere within a div regardless of other elements within the div. This means that when you specify a position of, say, left: 10px, it will position the element 10px to the left of the side of the div, whether or not there is another element there.
First, in order to absolutely position an element, we need to set the position of the parent div to relative, because the absolute positioned element is positioned relative to the parent div.


#branding {
	overflow: hidden; 
	margin-bottom: 30px; 
	position: relative; 
}

Now we can set the absolute position of our description. When position: absolute is used, we can specify its position in terms of left, right, top and bottom, using pixels, percentages or ems. First, the top - the description is almost exactly 50% from the top of the header, so lets specify that:


p.desc {
	font-family: "Myriad Pro", arial, sans-serif; 
	color: #fff; 
	font-size: 2.4em; 
	position: absolute; 
	top: 50%;   
}

Now we need to push it out to the right, by giving it a value for left:
if we use pixels, then when the text is resized, it will get closer to the h1, and eventually overlap it, so scrap that method. We get the same problem with percentages, only not as dramatically. The best thing to do is position it with ems, which as you remember get bigger as text size gets bigger, so the space between the h1 and description will remain when the text is resized.

1
2	position: absolute;
3	top: 50%; left: 8em;

And it looks great!

Step 13 - Navigation

Lets clean up this navigation menu, and get rid of the list style and text decoration, and add font styles.


ul#menu {list-style: none; }

ul#menu li a {
	font-size: 1.8em; 
	text-decoration: none; 
	color: #2b2b2b;
	text-transform: uppercase;
}

To get our links to line up horizontally, we're going to set the list items to float: left, so that each list item is "stuck" to the one to its left.

1
2	ul#menu li {float: left; }

We of course wind up with the same problem as with all floats, but all we have to do is add in overflow: hidden to the navigation div, and we're good to go.

Each list item is about 45px apart, so lets add 45px of padding to the right of each item.


ul#menu li {
	float: left; 	
	padding-right: 45px; 
}

Note: All these padding values can be written shorthand as:

1	padding: 11px 45px 11px 0px;

The shorthand for padding (and margins) is the values for top-right-bottom-left all in one line. I find the best way to remember the order is to think of the compass directions: n-e-s-w.

Next, lets add the background image, employing the same technique as before to ensure our background stretches when text is resized:

1
2	#navigation {background: #8ec196 url(images/nav_slice.jpg) top repeat-x; overflow: hidden; }

To find the padding value, once again just measure the height of the bar (mine is 40px) and subtract the size of the text (18px) to get the total padding, and divide by two: 40-18=22px.

1
2	ul#menu li {float: left; padding-top: 11px; padding-bottom: 11px; }

To move our navigation menu down a bit, the easiest thing to do is just add a margin to the bottom of the branding div.

1
2	#branding {overflow: hidden; margin-bottom: 30px; }

And finally, the 1px border at the top of the bar:

1	border-top: 1px solid #9cebda;

That's it! We're done with the header! Let's take a look:

Step 14 - Content

The first thing we need to do here is to create the two columns - one for the posts, one for the sidebar. By now this should be simple: just float one to the left, one to the right.

1
2	#posts {float: left; }
3
4	#sidebar {float: right; }

And... Nothing happened. At least it looks that way, scroll down and you'll find your sidebar stuck to the right side beneath the posts. Before the sidebar can move in beside the posts, we need to specify how much space the posts div can take up, and specify a width for the sidebar as well. Again, we're going to use percentages instead of pixels, so that if the text is resized, the sidebar stays at the side.

1
2	#posts {float: left; width: 67%; }
3
4	#sidebar {float: right; width: 33%; }

And we need to hide the overflow of our containing div:

1
2	#content {overflow: hidden; }

Great, we have a nice little two-column layout!

Step 15 - Styling the Posts

Since we used a CSS reset, the content of our post section has no style at all, and we need to go through the tedious task of styling every single possible element. My workflow is a bit different for this than with the rest of the page, as I don't really refer to the Photoshop document. I find font styling in Photoshop to be a real pain, so I usually skip it. To get the styles for my posts, I go through a process of trial and error. I usually start with settings similar to default browser styles, which you can find at This Link, and tweak them to my liking. I'm not going to go through the whole process step by step, but this is what I came up with in the end:



#posts h2 {margin: 7px 0 4px 0; font-size: 2.4em; }

#posts h2, h3, h4, h5, h6 {color: #3c3f40; }

#posts p {line-height: 1.3em; padding: 7px 0; font-size: 1.2em; }

#posts small {font-size: 1.1em; }

#posts a {color: #327800; font-weight: bold; text-decoration: none; }

#posts blockquote {margin: 0.7em 3em; border-left: 2px solid #327800; padding-left: 10px; }

#posts ol, ul, dl {font-size: 1.2em; margin: 4px 0 4px 40px; }

#posts h3, h4, h5, h6 {padding: 4px 0; }

#posts strong {font-weight: bolder; }

#posts em {font-style: italic; }

#posts code {font-size: 1.2em; }

#posts h3 {font-size: 1.8em;}

#posts h4 {font-size: 1.4em; }

Which should look something like this:

Now there's about 35px at the top of our post section, but our h2 tags already have a margin of 7px at the top, so lets add a margin of 28px to the top of the posts div.


#posts {
	float: left; 
	width: 67%; 
	margin-top: 28px; 
}

And that's about it for the posts section. On to the sidebar!

Step 16 - Sidebar

First off, lets add in that background color:

1
2	#sidebar {float: right; background: #d8ddd1;}

And fix the font styles:


#sidebar h3 {
	font-size: 1.6em; 
	color: #3c3f40;	
	margin-top: 10px 
}

#sidebar ul {list-style: none; margin-left: 20px; }

#sidebar ul li {font-size: 1.2em; }

#sidebar ul li a {text-decoration: none;color: #525254; }

We also need to push the sidebar down by 25px (35px - the 10px margin at the top of the h3 tags). This time, however, we can't use the margin-top property, because this will move the entire sidebar, including the background, down the page. We want the background to start right beneath the navigation bar, but the content to start 35px below that, so we need to use the padding-top property. We also need padding on the left, right and bottom, and 25px sounds about right, so we can declare it all in one padding value:


#sidebar {
	float: right; 
	background: #d8ddd1;
	padding: 25px; 
	width: 33%;
}

But oh no! Our sidebar is no longer at the side! This is because we added padding to the sides of the sidebar. When you add padding to an element, you are actually making it bigger. We just made our sidebar 50px wider, so now the widths of the floated elements add up to more than 100%. To fix this, lets first convert our 25px of padding to a percentage of 900px. It works out to about 2.7%, but I'm rounding up to 3%.

1	padding: 25px 3%;

Note: this is another shorthand value, it means that the top and bottom are both 25px, and that the left and right are both 3%.

Our sidebar is now 33+6% wide, so it's still too wide, but all we need to do now is subtract the 6% from the original 33%

1	width: 27%;

I thought the sidebar looked a bit wide at this point, so I reduced it to 25%.

The important thing to remember is that all the padding, margin, and even border values add to the width of the element, so you need to adjust the width property to compensate every time you add padding, margins or borders.

And there we go, no matter how big you make the text, our sidebar stays at the side, and the ratio between the post area and sidebar remain the same. It's an excessively plain sidebar, but I'm not going to bother styling it any more, just because its not really important to the goals of this tutorial.

Step 17 - Footer

First lets make the font a bit bigger and add some styles:


#footer p {color: #a5bf8d;}

#footer h4 {color:	#a5bf8d; font-size: 1.4em; padding-top: 0; }

#footer ul {list-style: none; margin-left: 0; }

#footer ul li a {text-decoration: none; color: #fff; }

Next we can add in our background image:

1
2	#footer {font-size: 1.2em; background: url(images/footer_slice.jpg) repeat-x; }

And since we want it to be able to stretch, we can add in the color at the bottom of the gradient to our background value just like we did before:

1	background: #093b2b url(images/footer_slice.jpg) top repeat-x;

Next add in that 2px border at the top:

1	border-top: 2px solid #1e956c;

Lets add a margin and some padding to the top and bottom:


#footer {
	font-size: 1.2em; 
	background: #093b2b url(images/footer_slice.jpg) top repeat-x; 
	margin-top: 30px; 
	padding-top: 20px; 
	padding-bottom: 20px; 
}

Next, we're going to create three columns by floating. Floating three elements works pretty much the same as floating two, we're going to float each column to the left. We need to declare the widths of each element being floated, using percentage values to allow for expansion.


#copyright {float: left; width: 20%; }

#links {float: left; width: 40%; }

#feeds {float: left; width: 40%; }

Just remember that we have to set the overflow to hidden in the parent div.

1	#footer {overflow: hidden;}

At this point, I decided that it would actually look better if the links and RSS divs came first, and the copyright info was at the far right, so I changed the order of the divs, and set the copyright div to float: right, and aligned the text to the right as well.


#copyright {
	float: right;
	text-align: right;  
	width: 20%; 
}

And there we have it, we're done coding and styling our page!

Step 18 - Accesibility testing

Througout the tutorial, I've been testing my page in Safari 4. Since Safari 4 is probably the most standards-compliant and modern browser, it displays web pages the most predictably. If only everyone used a standards-compliant browser... Unfortunately, there are still people out there using outdated browsers, and we need to prepare for that.

Let's start with the most problematic browser first: Internet Explorer 6. I use a mac, and have yet to find an effective (free) way to test my web pages in Internet Explorer. If anyone reading this knows of some sort of magical technique, please, let me know. Anyways, time to haul out the ol' family Dell. To install multiple versions of Internet Explorer at once, google "Multiple IE" and download the .zip file.

Surprisingly, it works out just fine in IE6! IE7 is okay too. Text is resizeable! I also tested this page in Firefox, Opera and Camino. I had trouble installing Google Chrome on the PC, so I couldn't tell you if it works, but I think it should, bceause of the simplicity of the markup and style.

Conclusion

That's it! Hopefully you've learned a thing or two about coding flexible websites. Check it out in any browser, make the text bigger, make it smaller, and our layout adapts just fine. Disable CSS, and it still makes sense! I hope you can see how easy it is to make your websites less fallible! This page was very simple, without many complicated challenges. When your layouts get more complicated, it will be a bit tougher to maintain flexibility.