width:auto vs. width:100% demo page

This is a demo document related to the article The difference between width:auto and width:100%. Please see the article for context and information.

I’m the containing block. I’m 400 pixels wide.

I’m the first child element. My width is auto. The sum of my horizontal margins, paddings and borders is 220 pixels.

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 100%, so I don’t fit inside the containing block.

Lab Index | 456 Berea Street Home | Copyright © Roger Johansson