How to set up an auto adjust width and height in CSS

Again, our best friend IE has it's own way of doing things. IE interprets width and height as min-width and min-height which is totally different from other browser. Given that, this can be a problem if we want our container to adjust accordingly to the content we want to display.

To resolve this, please see below.

#container {
        background-color:#FFFFFF;
        width:840px;
        height:450px;
}
html>body #container {
        height: auto;
        width: auto;
        min-height:450px;
        min-width:840px;
        overflow:hidden;
}

All browsers including our best friend IE will read through the first set of CSS rule #container and the second set will not be interpret by IE because it uses child selector 'html > body' in which interprets Non-IE browser.