Question

I’ve got a navigational bar (#nav_bar), which has the following CSS properties:

#nav_bar {
    background: url(../images/navbar.png) repeat-x;
    width: 100%; height: 50px;
    margin-bottom: 20px;
}

It takes the width of #wrap which is 1024px wide and has margin: auto;, however I would like to expand it so that it will fit all screen sizes 100%. I attempted to set width: 500%; just to see what it would do, then I realized that it expands from the left -> right, rather than both ways from the center.

So, what I’m asking is;

Is it possible to have an element expand from the center, then
perhaps I could set the max-width property or use javascript to
find out the visitors screen resolution then assign the width from
there; without major inefficiencies, i.e. extended load times/cross-browser compatibility issues?

Just for reference, a link to the particular page I’m talking about

Any answers will be greatly appreciated ;)!

Answer 1

Simply move your #nav_bar out of the #wrap.

Alternatively you can make your #nav_bar have position: absolute; left: 0px; width: 100%; in CSS, that will work too.