Your First CSS Layout

So you want to make the switch from tables to table-less layouts huh? Well this tutorial/article is going to give you a massive shove in the right direction. A little background knowledge of CSS will help you here, but you can follow this tutorial even if you haven't touched CSS also. It doesn't look much, but we'll be creating this two column floated layout. This can provide the base structure for some really great looking sites.This websites a three column floated layout!

Why CSS over Tables?
So why go to all the fuss of creating table-less layouts using CSS? Here are a few of the reasons...
• faster loading pages with CSS.
• more control over the positioning of elements with CSS.
• smaller code files.
• search engines love CSS table-less designs for the reason above.
• consistency throughout your whole site.
• with tables your design can get messy quickly with unnecessary code.
• nested tables (tables inside more tables) take a long time to load.

In this tutorial we're going to make a two column floated layout. Whats that i hear you asking? Float based layouts are the easiest type using CSS. In a float based layout you simply set the width of the elements you want, and then float them either left or right!

Step One – Creating the Foundation
To start with we need to give ourself the basic XHTML structure before we can go ahead and add any CSS to it. Its like if you were building a house, you wouldn't start with all the decor first would you? You need a sturdy foundation - the decoration and style (your CSS) comes later.

Create a new folder for all files your about to create in this tutorial, open up your editor of choice (Notepad, Dreamweaver, BBEdit etc) and use the code below. The dotted lines represent areas where your sites content would go.

Save this basic structure as 'index.html' inside the new folder you created above.

Most of the <div> id's here should be pretty self explanatary. If not, here we go. The 'wrapper' is the container your site sits inside, branding is the header area, content is obviously the content area, mainNav the navigation area, and footer and bottom of the site. If your a bit lost don't worry, adding the CSS and attatching it to the XHTML will transform this layout and give it a little structure.

Step Two – Adding the Styles
Now for the CSS then. Create a new file in your text editor, or WYSIWYG (What you see is what you get) editor, like Dreamweaver and use the CSS below. You will see the div id's in the XHTML structure above correspond to the CSS below. Thats how we style each element.

#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}

#content {
width: 520px;
float: right;
}

#mainNav {
width: 180px;
float: left;
}

#footer {
clear: both;
}

Thats the basic layout complete! Save this document as 'layout.css' inside a folder called 'css'

Step Three – Attaching the CSS
At the moment your XHTML document won't have changed. We need to attach the CSS we just made to it. This then applies all the styles. In the document 'index.html' we created above, add the line of code below inside the <head></head> tags of your page. This attaches the CSS we just saved as 'layout.css' to our web page. You will now be able to see the styles take effect.

Conclusion
Thats it! Ive simply added some extra content in, and changed the font. I really hope you found this tutorial helpful and its kick started your interest in CSS baded web design.

Vertical Drop Down CSS Menu