centering elements in body and keeping them side by side

I am really stuck 开发者_如何学Con this with no more ideas to try in mind...I have looked and tried everything and don't know what else to do here...

Basically I am try to keep a menu div side by side to the webpage AND keep it all centred.

Initially I had the menu and the other contents side by side using float left and then to centre it I did padding left..However as you might have guessed this totally fails when you are viewing your site from different computers with different screen resolutions...

So then I went back to point A of trying to center this stuff but now my menu is on top and so I dont know how to force them side by side...

Furthermore I am told to extend the logo over the menu....I don't know what to do now as I am stuck. I really hate this right now, my mind is going berserk I have been at this for 16 hours....

pastebin.com/2ng4WJQT pastebin.com/4Cr0Z5Tk

How it currently looks:

How its supposed to look...

Putting your header, content and sidebar in a container which is centered will sort this out.

The CSS will be something like:

#container
{
width: 900px;
margin:0 auto;
}

#menu, #content
{
float:left;
}

#menu{width:20%;}
#content{width:80%;}

UPDATE

Here's a demo: http://jsfiddle.net/nMUVj/

HTML

<div id="container">
    <div id="header">Header content</div>
    <div id="nav">Nav bar</div>
    <div id="content">Main Content</div>
</div>

CSS

#container
{
    width:70%;
    margin:0 auto;
    border:1px solid blue;
    padding:0;
}

#nav, #content{float:left; border:1px solid green;margin:0;}

#nav{width:20%;}
#content{width:79%;}