Unterschied zwischen width: auto und width: 100%

HTML

<h1>width:auto vs. width:100% demo page</h1>

        <p>This is a demo2 document related to the article <a href="/archive/201112/the_difference_between_widthauto_and_width100/">The difference between width:auto and width:100%</a>. Please see the article for context and information.</p>

        <div id="container">
            <p>I’m the containing block. I’m 400 pixels wide.</p>
            <div id="child-1">
                <p>I’m the first child element. My width is <code>auto</code>. The sum of my horizontal margins, paddings and borders is 220 pixels.</p>
            </div>
            <div id="child-2">
                <p>I’m the second child element. Like my previous sibling, the sum of my horizontal margins, paddings and borders is 220 pixels. But my width is <code>100%</code>, so I don’t fit inside the containing block.</p>
            </div>
        </div>

        <div id="labfooter">
    <p><a href="/lab/">Lab Index</a> | <a href="/">456 Berea Street Home</a> | Copyright &#169; 2003-2011 Roger Johansson</p>
</div>

CSS

#body {
        width:70em;
        max-width:100%;
        margin:0 auto;
        width:100px;                    
    }
    #container {
        width:400px;
        height:400px;
        background:#eee;
    }
    #child-1 {
        width:auto;
        margin:0 50px;
        padding:0 50px;
        border:10px solid #999;
        border-width:0 10px;
        background:#fee;
    }
    #child-2 {
        width:100%;
        margin:0 50px;
        padding:0 50px;
        border:10px solid #999;
        border-width:0 10px;
        background:#efe;
    }

JavaScript

// see: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/