[Solved] Wrapper Divs

Hi there.

I'm having the absolute dumbest problem with CSS. I've been coding for a good while but this is my first attempt at wrapper divs. For some reason, within the wrapper div when I try to have a header and two columns (left, and main, respectively), the columns refuse to go next to each other, like so: http://www.geocities.com/abbym805/. Now, they WILL go next to each other if I make main position:absolute;, but then that kind of defeats the point of the wrapper.

Here's my stylesheet:

body{padding:0px; margin:0px; font-family:arial; font-size:10pt; text-align:center; min-width:700px; background-color:#cccccc;}
#wrapper{width:700px; margin:0 auto; background-color:#ffffff; text-align:left; border-left:2px groove #999999; border-right:2px groove #999999; padding:0px;}
#top{top:0px; width:700px; height:200px; padding:0px; background-image:url(bg.jpg);}
#left{top:200px; left:0px; width:125px; padding:0px;}
#main{top:200px; left:125px; width:575px; padding:0px;}
h1{font-family:bradley hand itc, arial; font-size:48pt; color:#ffffff;}


And then my html:

~buncha javascript for the rollover buttons~
Abby's Site

Prism

Any ideas why this isn't working? Thanks.