Can someone help me with my web-development homework?

I've been working on my web development homework since last night and I'm not really sure if I understand how I go about it. I've been looking at the CSS floating tutorial at w3schools but I just can't seem to understand how they work. Here are the instructions we were provided and how the end result should look like.

The purpose of this assignment to test your ability to create a modern web page layout I recommend you create the layout from scratch using DIVs with ID's. However, you are welcome to use one of Dreamweaver's layouts if you prefer. I am not going to give you many details regarding the measurements. I want you to look at it and try to imitate it. Much of this is trial-and-error, which of course is the best way to learn. Keep trying, see what works (and doesn't work), and come speak with me if you have any questions.

Your hints:

The container is 780 pixels wide.

Use the width / height of the images to guide you as you create DIVs and configure margins/padding.

The red menu item that you see on the left occurs only when you move your mouse over any menu item

The font size is 0.9em for everything, except the footer, which is 0.7em

Here's the image: http://i.imgur.com/fJiQw.jpg

Now, what I see is that you have a header part with maybe two divs that are floated left of each other. The problem I'm having with that part is that I see there's a little space which could be either a margin/padding from the left on the first image and then margin/padding on the right from the second image. It's hard to see but the image on the left lines up with the sidebar below it as does the image on the right with the images below it. Now, I know that if I added that space, the second image would just go down to the next line since there is only 5px worth of space to go around since they're floating as far left as they can until they're stopped by the margin/padding of either another element that's also floating or the containing element. I also believe that I can't shorten the widths because the img would then be out of the box and I think that's not the way to go.

The next part is a sidebar and then an image that is maybe floated to its side? I know there's some margin-top or margin-bottom from the header pushing it down a bit so that's it's not at the same height as the sidebar. I think the part with the three images has a parent container and then three images floated to the right of each other with a bit of space between each.

Then the final part is a footer with an image that is possibly floated to right with a little padding. Then the text on the left with a nav under it.

Am I on the right track reddit? or am I completely confused? EDIT: Here's what I got so far. http://dl.dropbox.com/u/58349425/index.html http://dl.dropbox.com/u/58349425/main.css http://dl.dropbox.com/u/58349425/img.zip

There's the image and the files in case anyone wants to look through the code and tell me what I may be doing wrong. So far it looks similar except for the part up top.