Question

I am really stuck on 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…

Answer 1

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%;}