CSS expert needed.?

Question

I have made a page on my site with the layout I would like you to take a look at and explain why it is acting the way it is.

See the header is at the top. The menu and the content are beside each other in the middle. The footer is at the bottom. But when you resize it in internet explorer the whole page messes up. Can someone please explain why it is doing this. Thanks.

link to the page on my site is http://www.chaoticpulse.com/sitetemplete2/index2.html

Please note*
I'm using Internet Explorer with screen resolution of 800:600 .

P.S. I promise I will come back and give 10 points to whoever helps me.

Answer 1

Suggestion: (1) enclose the entire thing in a "wrapper" div of the appropriate pixel width, then inside the wrapper, give header and footer 100% and give menu and main percentages totaling 100% (or more comfortably, possibly, 99%). (2) Float the menu left and the main right, with the menu (and the footer) set to "clear: both")

Benefit... this will also let you, later, adjust the width of the wrapper in pixels without rediddling the width of menu and main, and you may swap menu and main by simply changing right to left and left to right.

Answer 2

It is all a question of mathematics.
Your header and footer are 800px.
Your menu is 150px and your main is 550px.

So when I use all the technology available to myself and I add
150
550
-----
700
-----

Oh now I can see what the problem is.

Answer 3

It looks fine at 1280x1024.