How to properly position DIVS on a page to

Question

When developing a site in HTML/CSS how do you position divs on a page to hold content in place and exactly where you want them. Not just in a straight up in down manner. Is there a unified method/technique that everyone uses to achieve this placement? Or more generally how is it done?

Example: Here is an image of an example page I'm building with a container div and 5 other divs inside it.

IMAGE: http://go-dl.eve-files.com/media/1310/image.png

I was able to place the header div at the top, I was able to place the sidebar div below it and to the left (floated left), and I was able to position the content div below the header and to the right of the sidebar div (floated right). Now I have put the footer div in but the footer floats under the sidebar but also to the left of the content div. NOT under it and at the bottom of the page.

There are so many possible options/values in Dreamweaver to a assign to each div like box, float, margin, position, padding, etc,. I have linked my code below. Is there anything I can do to facilitate positioning divs on a page more efficiently and at all for that matter. I'd like for the footer to stay at the bottom of the page.

Here is my code:

PASTEBIN: http://pastebin.com/xbvPEfjA

I am truly stuck on this. Any help would be greatly appreciated. Also there are some other questions similar to this question but not the exact same of what I am asking. Thanks in advance!

Answer 1

in your css apply clear:both to the footer. That means floated elements are not allowed on either side of it.