title: css3 need help in understanding box-sizing
body: <p>I have found the following from the site: <a href="http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-" rel="nofollow">http://www.htmlgoodies.com/html5/tutorials/learn-css3-from-a-z-getting-started-with-layouts-.html#fbid=Byc3E58e8v-</a></p>
  
  <p>"The CSS3 code for this is very simple. You just need to add the following property to switch the model for a particular element.</p>
  
  <pre><code>#W3C-model {
  box-sizing: content-box;
  }
  
  #traditional-model {
  box-sizing: border-box;
  }
  </code></pre>
  
  <p>Having understood how box-sizing works, the next question is where can you use it? Well, its very useful when you have two equal columns. If you give them 50% width each and add some padding and maybe a border, the columns won't show up side by side. This is an ideal scenario where you can set box-sizing to border-box and happily set the width to 50% for both boxes."</p>
  
  <p>I am not sure what is meant by the columns won't show up side by side? It sounds like what is expected here is the dividing border between the two columns would vanish or something like that - I am not sure. I have this sample code to experiment with:</p>
  
  <p><a href="http://jsfiddle.net/hE8UZ/" rel="nofollow">http://jsfiddle.net/hE8UZ/</a></p>
  
  <p>I am not seeing any effect at all. Besides not sure why the span elements didn't occupy 250px as width was mentioned as 50% of body.</p>
  
  <p>Please help.</p>
  
  <p>Thanks</p>