Generating Table of Contents...

CSS Coding Guide

Getting started coding without tables can be difficult. So you've read all the tutorials that teach you how to make a simple two column or three column layout but how do you make a real layout with actual content? How do all the elements in a tableless design work together? This guide will help answer those questions.

How to code a design without tables is a very expansive subject. There are many ways to complete any given task or achieve a desired result. The techiques presented here are the ones I use. I am always finding new and better ways to do things. You may already know a better way to complete a task than I do. Do whatever works best for you.

This layout has been tested in the following browsers: IE 6 on Windows 2000, Firefox 2 on Windows 2000, Netscape Navigator 9 on Widnows 2000, IE 5.5 on Windows 2000, Firefox 3 on Windows XP, IE 7 on Windows XP, IE 6 on Windows XP, IE 6 on Windows Vista, IE 7 on Windows Vista, Firefox 2 on Windows Vista, Opera 9.23, Safari 3 on Mac OS X, Safari 2 on Mac OS X, Firefox 2 on Mac OS X. These browsers together represent more than 99% of the browsers in use.

Who is this guide for?

If you have already read some tutorials but don't quite get how a tableless design comes together this guide may help you. If you have been coding with tables for years like I have and are trying to transition to coding without tables, this guide may help you.

Who isn't this guide for?

If you have never used any CSS before this guide may be to advanced for you right now. W3C.org has tons of examples that cover all the basics of working with CSS.

What does the guide cover exactly?

The guide goes rule by rule through all the CSS and markup used to create this design. The guide does not cover basic css formatting properties such as font-weight, font-size, color, background-color, etc... You should have some familiarity with these properties before beginning the guide.

Getting started

Because of the intertwining nature of some of the concepts presented it may be advantageous to read over an entire section or even the entire guide before actually starting to work with the code.

How the guide is formatted.

The guide is broken down into the major sections of the design. At the beginning of each section you'll see the markup for that section followed by the CSS rules that apply to that section. After the rules are explanations of what each one is doing. Some basic formatting properties such as font-weight are not covered in the explanations unless they affect other other rules in a significant way.

Links with a grey background are reference links. Most lead to pages at W3C.org. There are various other links which lead to additional resources. These offsite links will open in a new window or tab depending on your browser and settings.

I laid out the guide in such a way that it is suitable for printing. In some case, the markup has been truncated to fit the page. Please refer to the coded design for the complete markup.

Global Styles

These styles control multiple elements. Some are not used until later in the guide. The CSS:

body { background: url(../images/pageBg.gif) left repeat-y #081127; margin: 0px; padding: 0px; } div { font-family: Arial, Verdana, sans-serif; font-size: 12px; color: #FFF; } form { margin: 0px; padding: 0px; } a { font-weight: bold; color: #5188d9; } br { height: 1px; line-height: 1px; }

body

The padding and margins are both set to 0px. This ensures that the layout is right at the top and left edges of the browser window. The background added here creates the left background for the left column. The background is aligned left and repeats along the y axis (vertically).

div

A default font is set for all div elements.

form

The padding and margins are both set to 0px for all form elements.

a

A default format is set for all links. The links will be customized in groups or individually later.

br

We us br's to clear floated elements. However we don't want the default vertical spacing that br's have so the height and line-height are set to 0px. Don't worry if you don't understand what floated elements are! These excellent css float tutorials will bring you up to speed on how floating works.

Header

In the header we have the top navigation and logo. The markup:

The CSS:

#header { position: relative; background: url(../images/headerBg.gif) top repeat-x; height: 180px; } #topNav { position: absolute; top: 10px; left: 10px; } #topNav ul { list-style-type: none; margin: 0px; padding: 0px; } #topNav ul li { background: url(../images/topNavDivider.gif) top right no-repeat; float: left; padding-right: 2px; } #topNav ul li a { float: left; display: block; height: 40px; line-height: 40px; font-weight: normal; color: #FFF; text-decoration: none; padding: 0px 8px 0px 10px; } #topNav ul li a:hover { background: url(../images/topNavOvr.gif) top repeat-x; } #logo { position: absolute; top: 60px; left: 40px; }

What's happening:

#header : position

When working with CSS-P you will almost always have a single containing element that holds all the other elements in the page. Sometimes you will have more than one containing element. In this layout, there is a div (#header) that contains the top navigation and logo; the elements in the header. There is another div (#wrapper) that contains all the other elements. The reason the header elements are inside their own containing element is because the header background stretches all the way across the page. The #wrapper div does not stretch the entire width of the page. If we put the header elements inside, the background would be cut off on the right side.

The header's position property is set to relative. In CSS-P any element that is to be positioned is positioned in relation to its nearest positioned parent. We want to precisely position the top navigation and logo on the page so we position their parent, the header.

#header : background

The background is set. We use the repeat-x value so that the background tiles all the way across the browser window.

#header : height

Without a height value, the header collapses and other elements move up into the space.

The elements inside the header are positioned absolutely. A height is set to prevent the header from collapsing. The used is the height of the background that tiles across the page. The height is set to this value so that the entire background is visible vertically. If the height were set to 170px instead of 180px, part of it would be cut off.

#topNav : position

We need the top navigation to move down and to the right so that is sits on the background exactly where we want it. The position property is set to absolute.

Relative Vs. Absolute Vs. Static

When using the position property, you have three options for values:

Relative

The relative value takes the element you are positioning and moves it from where it was. The element is moved by the amount you specify with the top, left, right, and bottom properties. When elements are positioned relatively, the spaces they were in are still preserved.

Absolute

The absolute value does works the same way as the relative value. The difference is that an absolutely positioned elements does not have the space it was in reserved. Absolutely positioned elements are completely removed from the document flow. Other elements may be obscured by those that are absolutely positioned.

Static

The static value positions an element as it would normally be positioned. Since CSS properties cascade, you may end up with an element which has been incorrectly positioned relative or absolute. This is when you would use the static value. The element would be return to its' default position in the document flow.

Detailed positioning examples.

#topNav : top / #topNav left

The top navigation needs to move down 10px and to the right 10px. The top and left properties are used to accomplish this.

#topNav ul : list-style-type

The list-style-type property is set to none. This gets rid of the bullets that would normally show with an unordered list.

#topNav ul : margin / #topNav ul : padding

All list elements have margin and padding values by default. Setting the values to 0px removes the defaults.

#topNav ul li : background

The dividers between the navigation items are added using the background property. The top and right values are used to position the background to the top and right. The no-repeat value prevents the background from tiling across the width of each navigation item.

#topNav ul li : float

If the li elements aren't floated, they display one on top of the other.

In a list, the li elements are block level elements. What this means is that they will stretch as far horizontally as they can. This is why li elements display one on top of the other. Each one is stretched as far as it can. When an element is floated, it moves are far as it can in the direction you specify in the float value. The li elements here are floated left. This makes them collapse to the width of the text inside.

A complete list of all block level HTML elements.

#topNav ul li : padding

Without the 2px of padding the rollover obscures the divider.

2px padding is added to each li element. When the top navigation links are rolled over, the dividers would be covered by the rollover image if there was no padding.

#topNav ul li a : display

Anchors are inline elements. This means that other elements flow right around them unlike block elements which take up as much horizontal space as they can. You cannot use properties that affect height on an inline element. These include height, padding-top, and padding-bottom. We do want to be able to affect the height of the anchors so we set the display property to block.

A complete list of all inline HTML elements.

#topNav ul li a : float

Now that they are block elements the nav items are all displaying one on top of the other. Just like we did for the li elements, the anchors are floated left. This makes them collapse to the width of the text inside.

#topNav ul li a : height

We can now add some height. The height of the top navigation is 40px.

#topNav ul li a : line-height

If you have one line of text or a single element, you can center it vertically by setting the line-height to the same height as the element. This will not work with multiple lines of text or multiple elements such as several images. A quick example of vertical centering using line-height.

#topNav ul li a : padding

The top and bottom padding values are set to 0px. The height property is already making the anchors as tall as they need to be. Adding padding would stretch them taller than necessary. There is 10px padding total on either side of each link, so why is only 8px specified? Remember on the li elements 2px was added to the right to keep the dividers visible on rollover. That 2px is subtracted from the 10px total of each anchor leaving us with 8px.

Remember that in CSS-P any properties that alter the width an element or its spacing do so in an additive manner. If you have a 200px wide box and add 25px padding to the right and left sides, the width of the box is now 250px wide. As you learn more about the box model this will make more sense.

#topNav ul li a:hover : background

The background for the rollover is added. The repeat-x value is used so that the background tiles across the entire width of each navigation item.

#logo : position

The logo is positioned absolutely so that it can be moved precisely.

#logo : top / #logo : left

The logo is moved 60px down and 40px right.

Main content

#wrapper

The CSS:

#wrapper { width: 960px; }

The only CSS we apply to this element sets its width. Div's are block elements so our content in #wrapper will automatically show beneath the header. All of the elements from this point on will be inside this containing element.

Left column

The left column contains the search box, left navigation and bookmark links. The CSS:

#leftCol { float: left; width: 200px; }

Here's what's happening:

#leftCol : float / #leftCol : width

With CSS-P you can have columns just like with tables. The left column is floated to the left. A width of 200px is set. Without a width set the column would collapse to the width of the text inside. For this layout there's a specific width we want so it's set.

Search box

The markup:

The CSS:

#search { background: url(../images/searchBg.gif) top repeat-x; height: 40px; padding: 20px 0px 0px 20px; } #inputSearch { float: left; margin: 0px 10px 0px 0px; padding: 2px 0px 0px 3px; width: 125px; height: 16px; background-color: #002470; border: 1px solid #004f96; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #5188d9; } #btnSearch { float: left; }

What's happening:

#search : background

The top and repeat-x values are used to position the background at the top of the search box and make it tile horizontally.

#search : height / #search : padding

If you measure the search box in the PSD you will note that the height of the search box is 60px. Remember that in CSS-P any padding you add will increase the width or height of the box. We want the text field to be positioned vertically in the center of #search so we assign 20px padding to the top and left sides of #search. This makes 20px padding-top + 40px height = 60px total height. When you know the height of the elements involved, you can use this method to center them vertically.

#inputSearch : float / #btnSearch : float

If you have a complex form it is best to just go ahead and lay it out using tables. Yes, tables do have their uses. Just make sure you use all the proper attributes for form accessibility. When you have a simple form like this it can easily be laid out with CSS. The text field is floated left. When you have elements of a similar height, floating them will make them line up. This is how we get #inputSearch and #btnSearch nice and straight.

#inputSearch : margin

A 10px margin is applied to the right side of #inputSearch so it will be spaced apart from #btnSearch.

#inputSearch : padding

A little padding is applied to the top and left side of #inputSearch. This places the text right in the middle vertically and a little away from the left edge. You may be thinking that you could just line-height for the vertical centering. That only works in input fields in IE unfortunately. The amount of padding you apply to center your text will depend on the font-size you have set for your text in #inputSearch.

#inputSearch : width

The total width of the text field is 130px. We have 1px border-left + 1px border-right + 3px padding-left + 125px width = 130px total width. If you see things aren't lining up in your layout, always check to make sure you've accounted for any extra width added by things like borders and padding. 1 errant pixel of spacing really can drive you insane.

#inputSearch : height

The total height of #inputSearch is 20px. We have 1px border-top + 1px border-bottom + 2px padding-top = 20px total height.

Left navigation

The markup:

<div id="leftNav"> <ul> <li><a href="#">Nullam Pulvinar</a></li> <li><a href="#" id="level0Selected">Urna Id Blandit</a> <ul> <li><a href="#">Phasellus Eget</a></li> <li><a href="#" id="level1Selected">Dui At Nisi Aliquet</a></li> <li><a href="#">Euismod Curabitur</a></li> <li><a href="#">Sit amet Sapien</a></li> </ul> </li> <li><a href="#">Tristique Lectus</a></li> <li><a href="#">Quam Mattis Massa</a></li> <li><a href="#">In Luctus Enim</a></li> </ul> </div>

The CSS:

#leftNav ul { background: url(../images/leftNavDivider.gif) bottom right no-repeat; list-style-type: none; margin: 0px; padding: 0px; } #leftNav ul li { background: url(../images/leftNavDivider.gif) top right no-repeat; } #leftNav ul li a { display: block; height: 38px; line-height: 38px; font-weight: normal; color: #FFF; text-decoration: none; padding: 2px 0px 0px 20px; } #leftNav ul li a:hover { font-weight: bold; color: #ed1c24; } #leftNav a#level0Selected { background: url(../images/bullet_leftNavActive.gif) 20px center no-repeat; padding-left: 30px; font-weight: bold; color: #ed1c24; } #leftNav ul li ul { padding-bottom: 10px; background: none; } #leftNav ul li ul li { background: none; } #leftNav ul li ul li a { background: url(../images/bullet_leftNavOpen.gif) 40px center no-repeat; height: 20px; line-height: 20px; padding: 0px 0px 0px 50px; font-size: 11px; } #leftNav a#level1Selected { font-weight: bold; }

What's happening:

#leftNav ul

The margin, padding, and list bullets are removed just as we did for the top navigation. A background image is applied that will serve as the last divider in the left navigation. For each li element the divider is positioned at the top. You can only have one background per element so we apply the last divider to the ul itself to cap off the bottom of the left nav. The background is positioned to the bottom and right and does not repeat.

#leftNav ul li

The divider for each li is added. It's positioned to the top and right and does not repeat.

#leftNav ul li a : display

Remember that inline elements such as anchors cannot have their height altered so we set the display property to block so we can add height.

#leftNav ul li a : height / line-height

The total height of each menu item is 40px. However 2px of that height are taken up by the divider in each li element. We use the line-height property to center the link text vertically in each li. If you were thinking the line-height should be set to 40px, that is a good idea but this would cause the link text to be off vertically. Technically it would be centered but our available height excluding the 2px divider is only 38px so that value is used for the height and line-height.

#leftNav ul li a : padding

2px of padding are added to the top of each li and 20px to the left. The 20px of left padding move the link text away from edge of the left column.

#leftNav a#level0Selected : background

When a menu item is selected we want some kind of indication. The red text alone would be ok but the icon makes it even more obvious. For the left value 20px is used. This positions the background image (the icon) 20px from the edge of the left column. The center value is used to center the background vertically. The icon should not repeat so the no-repeat value is used.

#leftNav a#level0Selected : padding-left

Now that there's an icon there the link text for the selected menu item needs to be pushed farther than the regular links so 30px of padding is added to the left of the #level0Selected link.

#leftNav ul li ul : padding-bottom

Without additional padding the spacing is incorrect for the second level menu.

In each top level menu item the height is set by the anchors. We'll do the same for the second level menu items. But we need to add 10px additional padding to the bottom of the second level ul so that the spacing is correct.

#leftNav ul li ul : background

Remember that the C in CSS stands for cascading. We applied a background to our top level ul so the second level ul will have the same background. We don't want that so the background property is set to none to get rid of it.

#leftNav ul li ul li : background

The dividers that are set on the top level li's will cascade down to the second level. We don't want that so the background property is set to none.

#leftNav ul li ul li a : background

The second level links each have a bullet. The background's left value is set to 40px to move the icon 40px from the edge of the menu.

#leftNav ul li ul li a : height / #leftNav ul li ul li a : line-height

The second level menu items are half the height of the top level menu items. There's no divider taking up height in each element so the height and line-height are both set to 20px.

#leftNav ul li ul li a : padding

We don't want any padding to cascade down from the top left so the padding values are set to 0px on all sides except the one we want to affect which is the left. 50px of padding are added to the left side to move the link text to the right of the icon.

Bookmarks

The markup:

<div id="bookmarks"> <ul> <li><a href="#" id="rss">RSS News Feed</a></li> <li><a href="#" id="delicious">del.icio.us</a></li> <li><a href="#" id="google">Google</a></li> <li><a href="#" id="yahoo">My Yahoo!</a></li> </ul> </div>

The CSS:

#bookmarks { padding-top: 20px; } #bookmarks ul { list-style-type: none; margin: 0px; padding: 0px; } #bookmarks ul li { } #bookmarks ul li a { display: block; padding-left: 50px; height: 30px; line-height: 30px; font-weight: normal; text-decoration: none; } #bookmarks ul li a:hover { color: #FFF; } #rss { background: url(../images/icon_rss.gif) 20px center no-repeat; } #delicious { background: url(../images/icon_delicious.gif) 20px center no-repeat; } #google { background: url(../images/icon_google.gif) 20px center no-repeat; } #yahoo { background: url(../images/icon_yahoo.gif) 20px center no-repeat; }

#bookmarks

The bookmarks are spaced 20px from the bottom of the left navigation. Padding is applied to #bookmarks.

#bookmarks ul

Padding, margins, and bullets are removed from the bookmarks the same way as for the top and left navigation.

#bookmarks ul li a : display

Setting the display property to block makes the links stretch the width of the left column just like in the left navigation. This also allows height to be applied to each link.

#bookmarks ul li a : padding

We don't want the links on edge of the left column, so padding is applied to move them away.

#bookmarks ul li a : height / #bookmarks ul li a : line-height

The height and line-height are set to the same values to center the link text vertically.

#rss, #delicious, #google, #yahoo

Since each link will have a different icon, each one has its own ID. Now we can assign the icons. 20px is used for the left property so that the icon is moved away from the edge of the left column.

Right Column

The right column contains 2 columns of it's on. Column 1 contains the main content. Column 2 contains the headlines, newsletter, and links. The CSS for the right column:

#rightCol { background: #001342; float: right; width: 758px; border: 1px solid #102963; border-top: none; } #rightCol hr { border-top: 1px solid #00487c; border-right: none; border-left: none; border-bottom: 1px solid #001342; }

#rightCol : width

The total width of #wrapper is 960px. The left column is 200px wide. This leaves 760px for the right column. There is a 1px border on the right, bottom and left sides so 2px is subtracted from the available width leaving 758px for the right column.

#rightCol : float

The right column needs to be on the right side of the layout so it is floated right. You will note that your widths must add up exactly. If the width of the right column were set to 760px instead of 758px, it would display to the right and below the left column. This is because there wouldn't be enough room for both to fit.

#rightCol hr

The hr element has borders on all 4 sides. The top border is set to the color we want. The left and right borders are set to none. The bottom border is set to the color of the background. In most browsers you can set the bottom border to none as well. However this does not work in IE.

Column 1

The CSS:

#col1 { float: left; width: 460px; padding: 20px; }

#col1 : float

#col1 contains the main content. #col1 is floated left so that it displays on the left side of the #rightCol.

#col1 : width / #col1 : padding

The total width of #col1 is 500px. Since there is 20px padding on all sides the padding must be subtracted from the total width. 500px total width - 20px padding-right - 20px padding-left = 460px width.

Content Items

This is a big block of code, but most of the elements are duplicated across the three sample items. The markup:

<div class="item" id="featured"> <h1><a href="#">Featured: Donec malesuada, velit sit amet ultricies.</a></h1> <div class="itemContent"> <p>Donec pretium faucibus enim. <strong>Morbi mattis.</strong> Vestibulum ante.</p> </div> <div class="infoBar"> <a href="#">read more</a> | <a href="#">email to friend</a> </div> </div>  <div class="item"> <h1><a href="#">Phasellus eget dui at nisi aliquet.</a></h1> <div class="itemContent"> <p> <div class="itemImage"> <div> <a href="#"><img src="images/sample_intro.jpg" width="160" height="93" border="0" /></a> </div> Image caption </div> Donec pretium faucibus enim. Morbi mattis. <a href="#">Vestibulum ante. </p> <p>Vestibulum dui. <a href="#">In sollicitudin, enim tincidunt</a> fringilla laoreet.</p> </div> <div class="infoBar"> <a href="#">read more</a> | <a href="#">email to friend</a> </div> </div>  <div class="item lastItem"> <h1>Mauris dolor est, tincidunt sit amet, pellentesque quis, condimentum a, eros</h1> <div class="itemContent"> <p>In sollicitudin, <a href="#">enim tincidunt fringilla laoreet</a>, metus risus convallis odio.</p> <p>Duis egestas quam quis urna. Ut ornare fermentum mauris. <strong>Praesent est.</p> <p>Duis aliquet elit nec erat. Maecenas pellentesque turpis pretium eros.</p> </div> <div class="infoBar"> <a href="#">read more</a> | <a href="#">email to friend</a> </div> </div>

The CSS:

.item { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #002862; } .item h1 a { text-decoration: none; font-weight: normal; color: #FFF; } .item h1 { margin: 0px; font-weight: normal; font-size: 24px; color: #FFF; } #featured h1 { margin: 0px; font-weight: normal; font-size: 18px; padding: 1px 5px; background-color: #ed1c24; color: #FFF; } .itemContent { font-size: 14px; line-height: 18px; } .infoBar { text-align: right; color: #ed1c24; } .infoBar a { color: #ed1c24; text-decoration: none; } .itemImage { float: right; margin: 0px 0px 10px 10px; text-align: center; font-size: 11px; font-style: italic; } .itemImage div { padding: 10px; border: 1px solid #003d82; margin-bottom: 5px; } .lastItem { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; }

.item

There's a border at the bottom of each item. 20px of padding is adding to create some space between the info bar and the border. A 20px margin is added to the bottom of each item to create space between the bottom of one item and the top of the next.

.item h1

Heading elements have a pretty big margin on both the top and bottom. The p tags in the content have not had their margins altered so they will serve to space the headings from the content.

#featured h1

The heading for the featured item is styled differently so that it will stand out. Headings are block elements so padding can be applied to them. Padding and a background color are added.

.infoBar

We use the text-align property to make the contents of the info bar align to the right side. Why not use float? Floating the info bar right would make the entire red bar collapse to the right side of column 1 and this isn't what we want.

.itemImage : float

The item image div is floated left. It has collapsed as far right as it can.

.itemImage : margin

Without any margin values added the text would be in contact with the image. 10px margins are added to the bottom and left sides of the item image to prevent this.

.itemImage : text-align

The text-align property is set to center so that the image caption is centered underneath the image.

.itemImage div : padding

10px padding is applied to create some space bettween the image and the border we're setting next.

.itemImage div : margin-bottom / .itemImage div : border

5px margin is added to the image to create some space between it and the caption. A simple 1px border is added.

Item 3

You may have noticed that item 3 has two classes: .item and .lastItem. For item 3 we don't want a border or extra padding and margins so they are removed. This makes everything look nice and finished for item 3.

Column 2

The CSS:

#col2 { background: url(../images/rightColBg.gif) top left no-repeat; float: right; width: 218px; padding: 20px; } .titleLarge { font-size: 24px; margin-bottom: 10px; }

The total width of column 2 is 260px. The widths of all the other elements have to be considered when setting the width property. The total width #wrapper is 960px. 960px total width - 200px left column width - 500px column 1 width - 2px border around #rightCol - 20px padding-left on column 2 - 20px padding-right on column 2 = 218px width for column 2. This column needs to be on the right side so it's floated right. The .titleLarge style is used for headings in the right column.

Headlines

The markup:

<div id="headlines"> <div class="titleLarge">Headlines</div>  <div class="headlinesBlock"> <a href="#"><img src="images/sample_obama.jpg" border="0" class="categoryImage" /></a> <a href="#" class="categoryName">Vestibulum ante</a> <ul> <li><a href="#">• In faucibus orci luctus et</a></li> <li><a href="#">• Cubilia Curae; Donec</a></li> </ul> <br clear="all" /> </div>  <div class="headlinesBlock"> <a href="#"><img src="images/sample_clinton.jpg" border="0" class="categoryImage" /></a> <a href="#" class="categoryName">Integer eget magna</a> <ul> <li><a href="#">• Auctor augue. Phasellus</a></li> <li><a href="#">• Dui at nisi aliquet euismod.</a></li> </ul> <br clear="all" /> </div> </div>  <br clear="all" /> <hr />

The CSS:

.categoryImage { margin-top: 3px; float: left; margin-right: 10px; } .categoryName { font-size: 14px; color: #ed1c24; } .headlinesBlock { margin-bottom: 10px; } #headlines ul { list-style-type: none; margin: 0px; padding: 0px; } #headlines ul li a { color: #FFF; font-weight: normal; font-size: 11px; text-decoration: none; }

.categoryImage

Each block of headlines has an image to go with it. The image is floated left. A 10px margin is added to the right side to move the links away from it. The image by default displays above the height of the links so a 3px margin is added to its top to move it down.

.headlinesBlock

A 10px margin is added to the bottom of each headlines block to space them apart.

#headlines ul

The bullets, padding and margin are removed.

After each ul a >br clear="all& /< is added. In CSS-P floated elements are removed from the document flow. The floated image extends below the links. Without the >br< each headlines block would be in contact with the one below. >br clear="all& /< is added after the #headlines div for the same reason.

A >hr< is added to provide a visual separation between the headlines and newsletter.

The markup:

<div id="newsletter"> <div class="titleLarge">Newsletter</div> <p>Etiam suscipit nisi sit amet magna. Duis ut nisl quis ligula.</p> <form action="" method="post"> <input type="text" name="newsletter" id="inputNewsletter" value="Enter e-mail" onclick="this.value=''" /> <input type="image" name="submit" value="submit" src="images/btnNewsletter.gif" id="btnNewsletter" /> </form> <br clear="all" /><br /> </div>  <hr />

The CSS:

#newsletter { padding-bottom: 10px; } #newsletter p { font-size: 11px; margin-bottom: 20px; } #inputNewsletter { float: left; margin: 0px 10px 0px 0px; padding: 3px 0px 0px 5px; width: 135px; height: 17px; border: none; background-color: #5e96de; font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #FFF; } #btnNewsletter { float: left; }

#newsletter

10px padding is added to the bottom of the #newsletter div to space #inputNewsletter and #btnNewsletter away from the <hr>.

#newsletter p

A 20px margin is added to the bottom of #newsletter p to space it away from the text field and button. No margin or padding on top is necessary because the title has a margin applied that is keeping it spaced from the text content.

#inputNewsletter / #btnNewsletter

#inputNewsletter is styled very much the same way as #searchInput. We just have to be sure to add up all the borders and padding used to make sure the width is correct. Both #inputNewsletter and #btnNewsletter are floated left to make them line up.

A >hr< is added to provide a visual separation between the newsletter and links.

Links

The markup:

<div id="links"> <div class="titleLarge">Links</div> <ul> <li><a href="#">Pellentesque habitant morb</a></li> <li><a href="#">Senectus et netus et malesuada</a></li> <li><a href="#">Fames ac turpis egestas</a></li> <li><a href="#">Etiam malesuada, erat sit</a></li> <li><a href="#">Amet imperdiet ornare, enim ligula</a></li> <li><a href="#">Ultrices turpis, a ullamcorper lectus</a></li> <li><a href="#">Justo sed lectus maecenas</a></li> <li><a href="#">Llacinia aliquet erat</a></li> </ul> </div>

The CSS:

#links { } #links ul { list-style-type: none; margin: 0px; padding: 0px; } #links ul li { margin-bottom: 3px; } #links ul li a { background: url(../images/bulletBlueSmall.gif) left center no-repeat; font-weight: normal; padding-left: 10px; } #links ul li a:hover { color: #FFF; }

#links ul

All bullets, margins and padding are removed.

#links ul li

A 3px margin is added to each li to space the links apart. The links in the links section are just regular links that do not span the width of #col2. Since we didn't make them block elements we can't add margins to them so the margins are added to the li's instead.

#links ul li a

The background property is used to add a bullet to each link. 10px padding is added to the left of each link to move them away from the edge of #col2 so that they don't obscure the bullets.

Footer

The markup:

<div id="footer"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> <p id="copyright">Phasellus pharetra, purus quis hendrerit porta. <a href="#">orci et nulla</a>.</p> <br clear="all" /> </div>

The CSS:

#footer { width: 720px; float: right; background: #0c1938; margin-bottom: 40px; float: right; text-align: center; padding: 20px; } #footer ul { list-style-type: none; margin: 0px; padding: 0px; } #footer ul li { display: inline; } #footer ul li a { padding: 0px 20px; text-decoration: none; font-weight: normal; } #copyright { margin: 0px; padding: 20px 150px 0px 150px; color: #2f5189; } #copyright a { color: #2f5189; }

#footer : width / #footer : padding

The #footer div spans the entire width of #rightCol. The total width of #rightCol is 760px. There is 20px of padding on all sides of the #footer div so that amount is subtracted from the total width. 760px #rightCol width - 20px padding-right on #footer - 20px padding-left on #footer = 720px. A 40px margin is added to the bottom of #footer to space it away from the bottom edge of the browser.

The text-align property is used to horizontally center the contents of the footer.

#footer ul / #footer ul li

All bullets, padding and margins are removed from the footer navigation. The display property is set to inline to make the links display horizontally instead of one on top of the other. The links here could be floated, but floated elements cannot be centered using the text-align property. To space the links apart horizontally, 20px of padding is added to the left and right of each link.

#copyright

The default margins are removed from the p element. Padding is added to space #copyright away from #footer ul and to make the text wrap to two lines.

End

If you've made it this far and read everything congratulations. There are many ways to accomplish any given task and you can do a lot of cool things with CSS-P. Never stop reading, and never stop learning...