CSS Tutorial - Learn CSS - website layout

In this css tutorial i'm going to show how to layout your websites using the simple float technique with css. This will replace any need for tables or absolute positioning.

Today there are very few html'ers who use tables to lay out their websites. There are many different ways to layout your website with css, i'm going to show you the easiest and most browser compatible way of doing so.

Floating

So lets start with some floating.

We want to create a div that will hold our header, content, footer - here's how.

We will call our header #header (original - i know) We want this header to appear at the top of the page and centered in the page. For this the first thing we need to do is create a wrapper for the header, content and footer divs. The wrapper has just 2 declarations. Margin and width. This is how it will look:

Margin auto will put an equal margin on either side of your div cause it do appear in the middle of your page. You can make the width whatever you like. These are the only 2 declarations you should have on your wrapper div, in the html all your divs will go inside the wrapper div.

Now we'll create our header div.

That's all you need for the header. The float: left effectively aligns the div to the left and anything next to the header div will wrap around the div, however because the header div is 900px wide there is no space for anything to wrap around next to the div, so anything that is next to the div will go onto the next line.

Next is the content and footer divs, these will be virtually identical to the header div but we'll change the background colour for clarity.

There you have it. Below is your html code and a picture of what your page should look like thus far.

 Not exactly the Sistine Chapel but we'll get there.

Next we're going to split the content into a 2 columns, we'll have some content in the left and some content in the right. So lets start by creating our content left and then the content right.

Notice how we've made the height of the left div by making it an auto height. This means that when we fill it with content the div will grow to accomodate the amount of content inside. Also notice how in the right div, we've left the background colour out, this means the content div's colour will show through which is red. Because we have floated both divs left they jut up next to each other because there is enough space for both of them.

We've also added some content to the left div to give it some height, we've coloured the text with color: white; so it stands out from the black background. You can do this with by styling your p tag or you can do it within the div.

Below is what your html page will now look like:

 Now we'll add some padding to the text in the left div and also add some content to the right div. Here's is the css, after i'll explain what it all means.

 You can see the first line of css #content-right img - This targets all html img's inside content-right. So we've added some padding around the image and we've floated the image left. You'll notice in the image how the text wraps around the floating image.

Next is .padding - This adds padding from the edges of the divs that .padding is inside of. Thus pushing the text away from the edges.

We've also added the css for our logo which goes in the header, we've float the logo to the right of the div and added some padding, font size and font weight. You could have an image in here in which case you wouldn't need to specify font, color, weight.

Below you will see the html code for the page and then an image of what your page should be looking like:

And that is the simplest way of laying out your website. This is the basic knowledge you need for laying out any element with the float property. I hope you have found this article useful. If you are in need of a website then please visit Artisan Websites.