Hi everyone,

This is my first post. This seems like a great forum, and I hope to be frequenting it often from now on.

Anyway, I have a series of website I'm working on (they're all in my signature). One of them YouTubeKeep.com, looks freaking awful, I know!
I've had my friend working on a design in his free time.

Both of us are self-taught when it comes to web scripting, so we're having some trouble with the CSS.

You can see it here:
http://www.youtubekeep.com/temp_new_.../mainpage.html

CSS is obviously at:
http://www.youtubekeep.com/temp_new_design/master.css

The problem is that extra grey border surrounding everything. It's not supposed to be there and it cuts off the ads (well their placeholders).

That border is actually supposed to surround the footer of the page (the copyright and links).

Thanks in advance.

Your #wrapper isn't stretching to it's contents length, so the footer kinda fills that space.
What I think you should do, is put an extra div as the last element of your #wrapper with style="clear: both".
There is also a new way of stretching floats, but I'm not sure you can use it now because you already have the overflow property in use.

put an extra div as the last element of your #wrapper with style="clear: both".

No, don't add an extra useless div for this.

All you need to do is add overflow:auto to #wrapper and #main and the wrapper will then contain the floated elements.

You need to learn about CLEARING FLOATS.

Yea I almost said that, but I saw he was using overflow: hidden. So...

I forgot to mention - you need to REMOVE the clear:both on those divs - that is NOT the proper way to clear floats, it's quite pointless actually.

haha yeah better remove those.

Thanks heaps for the quick replies! It fixed it, yay!

Like I said, me and my friend (who did the design and CSS) are both self-taught and haven't had much experience.

Thanks again!