skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Floats - L. 06

Now, we are going to work some magic!

Open a new window in your browser and then open your index.html page in the new window. Your div's with id's line up in order one after the other. The main div is under the logo. The sidebar is under the main div.

We're going to add a few lines of code to our style.css file so that we have a 2 column layout.

What we have now

Open your style.css file with your plain text editor. You should have something similar to this (Your color choices or background could be different):
body {background: #ffffdd url(images/weba01.jpg); color: #660000;}
p {background-color: #ffffff;}
#wrapper {margin: 0 auto; width: 800px;
background: #ffffee url(images/weba02.jpg);}

Adding the divs

We're going to add some code for our divs that have id's, so let's add their names and the curley brackets first. Remember, since these are id's, we need to have the # sign in front of the name:

#logo{}

#main{}

#sidebar{}

#footer{}

Floating the main div and the sidebar

Now we'll make two columms by using the float property. We'll add float: right to the #sidebar css and float: left to the main div css. We'll also set a width for the two containers that will be side-by-side. Right now we want to give ourselves some breathing room, so we'll set the main container width to 550px and the "side" bar to 200px for a total of 750px. We'll talk more about the "Why" of it later. So add the code so that your "main" div and "sidebar" div look like this:

#main{width: 550px; float: left;}
#sidebar{width: 200px; float: right;}

Go to file --> save and save the changes you made. Refresh/reload your browser window that has the index.html file and view the changes. Woohoo! The two containers are side-by-side. But . . .

Whoa! What happened to the footer??? Why is it up there!?! What a mess!

Fixing the Footer

When you move containers out of the "natural flow", then strange things can happen if you don't add some code to the next container in line.

So, we need to clear the floats in the footer. We will add clear:both to the footer in the style.css file. Let's also add code so that the  text in the footer is centered. We'll do this by adding text-align: center; to the code. so that your footer looks like this:

#footer{clear: both; text-align: center;}

Go to file --> save and save the changes you made. Refresh/reload your browser window that has the index.html file and view the changes.

Now that is much better!

Switching Sides

Some folks will have navigation links in the sidebar. But some folks prefer the navigation to be on the left rather than on the right.

So, we'll switch the floats.

#main{width: 550px; float: right;}
#sidebar{width: 200px; float: left;}

Go to file --> save to save the changes. Refresh/reload your browser window that has the index.html file and view the changes.

Ahhh, magic!

Giving the Columns a Background Color

Now that we have some id divs, Let's delete the code for the paragraphs and put the background colors in the "main" and "sidebar" divs. And I'm going to use two slightly different colors:

#main{width: 550px; float: right; background-color: #ffffff;}
#sidebar{width: 200px; float: left; background-color:
#ffffee;}

Go to file --> save to save the changes. Refresh/reload your browser window that has the index.html file and view the changes.

Adding margins

Hmmm, we've got the columns, but they don't look that great. There is no space between the text and the edge of the paragraphs and the columns don't look so good, either. There are some different methods you can use to "pretty" things up, so we'll just play around and then you can choose what you want to do.

Let's see what happens when we give the id divs a margin. Let's concentrate on the "main" div and the "sidebar" div for now. We'll add the margin to just the left side of each.

#main{width: 550px; float: right; background-color: #ffffff;
margin-left: 10px;}
#sidebar{width: 200px; float: left; background-color:
#ffffee; margin-left: 10px;}

Go to file --> save to save the changes. Refresh/reload your browser window that has the index.html file and view the changes.

That helped a bit, but the text is still at the edges of the containers in the two divs. So, let's add some padding to the two containers.

#main{width: 550px; float: right; background-color: #ffffff;
margin-left: 10px; padding: 5px;}
#sidebar{width: 200px; float: left; background-color:
#ffffee; margin-left: 10px; padding: 5px;}

Go to file --> save to save the changes. Refresh/reload your browser window that has the index.html file and view the changes.

Oops! The column on the right goes all the way over to the border of the wrapper. So, let's fix that by putting a margin on the right of the #main div also. You could add

margin-right: 10px;

But, we'll use shorthand to do it. You could specify different dimentions for each side by putting those in order, such as:

margin: 10px 5px 15px 20px.

The dimensions go from top (10px), right (5px), bottom (15px) and left (20px). Or you could use:

margin: 0 10px

In this code, 0 is for the top and bottom and 10px sets the dimensions for the left and right sides.

#main{width: 550px; float: right; margin: 0 10px; padding: 5px;}

Go to file --> save to save the changes. Refresh/reload your browser window that has the index.html file and view the changes. Now that's better.

The CSS Box Model

Now, let's take a closer look at our two columns ("main" and "sidebar" divs). It seems like it should be simple enough. The "wrapper" container is 800px wide so you should be able to simply choose two widths that would add up to 800px.

Alas, it's not that easy. And that brings us to the CSS Box Model. Every HTML element (box) can have a margin, border, and padding as well as the space for the actual content. However, not all browsers add these to the "boxes" in the same way.

Most browsers will add the dimensions of the margin, border and padding to the "outside" of the "box". However, some versions of IE put the margin on the outside, but put the border and the padding on the "inside" which reduces the amount of space for the text and other content.

What a headache!

Our "boxes"

We'll concentrate on what most browsers do and then figure out what to do with IE later.

Our "main" div is 550px wide, has a padding of 5px on the left and right, and has a 10px margin on the left and right side. For most browsers, the total will be 580px


weba box a

Our "sidebar" div is 200px wide, has a padding of 5px on the left and right, and has a 10px margin on the left. 200px + 5px + 5px + 10px = 220px

580px (main div) + 220px (sidebar) = 800px (the width of the wrapper)

What to do about IE?

Personally, I would use a free css template. The designer has already done the work of figuring out what to do. You can test the template before you actually start using it to be sure things look fairly similar with different browsers. But then, I like to do things the easiest way.

If you prefer to create your own templates, the "More Information" section below has some links to articles discussing the CSS box model. The articles tell about what has been done in the past and some newer articles tell about things folks are doing now.

Now is some time to play. Try styling your footer. Maybe give it a background and try some different widths. Decide if you want your sidebar column on the left or right. Change the color of the text and/or background images. Have fun!

Code in style.css file so far:

body {background: #ffffdd url(images/weba01.jpg); color: #660000;}

#wrapper {margin: 0 auto; width: 800px;
background: #ffffee url(images/weba02.jpg);}

#logo{}

#main{width: 550px; float: right; background-color: #ffffff;
margin: 0 10px; padding: 5px;}

#sidebar{width: 200px; float: left; background-color:
#ffffee; margin-left: 10px; padding: 5px;}

#footer{clear: both; text-align: center;}

More Information

Next: Font Face (Typeface) Lesson 07 -->

Website "A" List of Lessons

Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08