Q:

HTML Auto Resizing banner to fit different screen resolutions?

I am currently working on a website and implemented a banner. The code is 
<div id="banner"><div>
    <div id="wrapper" style="width:100%; overflow:hidden;"">
    <div id="container" style="width:800px; margin-right:auto;"">
    <A HREF="http://www.nalashirts.com"><img src="http://i.imgur.com/jdoascd.png"
        alt="N.A.L.A. Apparel"
    />
</div></div>

I want the image to re-size automatically to fit the resolution of the users browser. How would I go about that?

A:

I added a "width: 100%" to the "" and ".container".
Fiddle here
Here is the new code. 
<div id="banner">
    <div id="wrapper" style="width:100%; overflow:hidden;">
        <div id="container" style="width:100%; margin-right:auto;">
                <A HREF="http://www.nalashirts.com"><img style="width: 100%;" src="http://i.imgur.com/jdoascd.png" alt="N.A.L.A. Apparel"/>
        </div>
    </div>
</div>

This can be fixed without inline styles. Here is the new HTML:
<div id="banner">
    <div id="wrapper">
        <div id="container">
                <a href="http://www.nalashirts.com"><img class="banner-img" src="http://i.imgur.com/jdoascd.png" alt="N.A.L.A. Apparel"></a>
        </div>
    </div>
</div>

And the corresponding CSS:
#wrapper {
    width: 100%;
    overflow: hidden;
}
#container {
    width: 100%;
    margin: 0 auto;
}
.banner-img {
    width: 100%;
}

Note: We use banner-img as the class name to not overwrite the default img tag styles.

