Detaching header from main page - how to get main section and header size differently

Hi All !

i am trying to design a shop for that i need a design like this

i have started from default template, i want a header which has width 100% where as the main section should have 60% width and should be centered.

for this i changed the #mainWrapper to this

#mainWrapper {
text-align: left;
width: 70%;
vertical-align: top;
}

in css file. when i change its width from 100% to 60% it does change its width and that is what i want to main section but at the same it it reduces the width of header too. but i want header to be 100%.

also i have have turned on the left information box and turned off every thing else.

also in css i have removed colors of both left column and right column.

i have managed to get the header bar chnage its color centre its text by changing it to

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #ffffff; font-weight: bold;
color: #000000;
height: 60px;
width: 100%;
margin-top:70px;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 22px;
list-style-type: none;
text-align: center;
line-height: 1.5em;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
color: #000000;
white-space: nowrap;
}

and i have got so far you can see here

i hope i will get some valuable help to finish my store

thanks
salman

hay guys

i have almost designed the main page and working on the subpages
product info and other ones once i have completed mine i will give insight into the process

regards
salman