Extending the sides of my nav bar in CSS/HTML (just like the header)

Question

I have been searching since yesterday for a solution but couldn't find one, or couldn't find the right keywords to search with.

So I have a header on my website like this is a header and I centered that nicely and extended the background color of it.

Now I found out how to make a nice interactive/glossy nav bar as a footer but im using it at the top and the thing is I also want to extend it's size, however it just centers itself and doesn't extend. I'll show this in a screenshot and will post my code.

Also: I want my box to be centered, which is contained in a div called #main_inner_area.

Note: Navbar is still called #footer in CSS/HTML code.. I want to extend the sides of my navbar, like the background color of my header is extended to the full width. my screenshot: i41 DOT tinypic DOT com SLASH 2qk6mmt.png (sorry but its hard to explain without screenie)

HTML:

<div id="main_area">
    <header> 
     <h1>This is a header</h1>
    </header>
    <div id="footer">long code for layout navbar</div>

    <div id="main_inner_area">
        <article>d       fsdf sdf sdf dsf dsf dsf</article>
    </div>
</div>

CSS:

*{
padding: 0px;
margin: 0px;
}
#main_area{
    background:#4863A0;
    display: block;
    text-align: left;


}
header {

height:100px;
background: #4863A0;
color:white;
border:none;
width:700px;
margin: 0 auto;


}



#footer{

    width:700px;
            top:100px;
    margin:0 auto;
    padding:0;
    left:0;
    right:0;

            margin: 0 auto;
    height: 40px;
            border-radius:7px 7px 7px 7px;
    font-family:Arial;
    text-shadow: 1px 1px 1px black; /*h,v,blur,color */
    /* glass effect */
    border-bottom: 1px solid rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.5);
    /*inset = inner shadow ----------- this just creates multiple shadows*/
    /*top border, top white section, overlay top white, bottom*/
    box-shadow:  inset 0px -2px rgba(255,255,255,0.3),
         inset 0px -15px 20px rgba(0,0,0,0.2),
         inset 0 -10px 20px rgba(255,255,255,0.25),
         inset 0 15px 30px rgba(255,255,255,0.3); 
}

#main_inner_area{
            float: left;
            width:735px;
            margin:25px 0px 10px 0px; 

}

article{

        background: rgba(255,255,255, 0.5);
        border: 1px solid #4863A0;
        margin:0px;
        margin-bottom: 10px;
        padding: 15px;
        font-family: Tahoma;
        font-size: 14px;
        text-align:left;
        display:block;
        width:700px;
        height:auto;
        border-radius: 7px 7px 7px 7px;     

}

P.S. I'd REALLY appreciate it. Im an 18 year old student trying to learn some extra things next to my study.

Answer 1

To make your header dynamic just remove the width attribute from it (and from #footer aswell). If you set it to a fixed value of course it cannot scale.

To center your article use margin-left: auto; margin-right: auto;

Update: (stretch Nav Bar)

CSS Changes

#footer {
    width: auto;
}

#footer .links {
    width: 700px;
    margin: 0 auto;
}

HTML Changes:

<div id="footer">
    <div class="links">long code for layout navbar</div>
</div>

See http://jsfiddle.net/UKYDb/1/

Answer 2

I'm not sure what you mean by "extend" but you're setting a fixed width and height to everything:

#footer {
width: 700px;
height: 40px;
...
}

Try using percents instead of fixed widths for everything in your CSS code.

width: 100%;