float 3 divs equally

by Andy Bulka

HTML

<p>From <a href="http://stackoverflow.com/questions/16553635/css-how-to-float-3-divs-side-by-side-for-width100-without-messing-up">stackoverflow</a></p>

By default, borders are out of the box-size, So 3 elements of width 33% are over 100% (99% + 6 times the border size!).<br clear="all" />
    <div class="left">...A1</div>
    <div class="left">...A2</div>
    <div class="left">...A3</div>

<br clear="all" /><hr>
Use { box-sizing: border-box; } so the border is counted within the box-size. Thus, 3 divs of widht="33%" are exactly equal to 99%. It fit well in the body { width: 100%; }:<br clear="all" />
    <div class="left box-sizing">...B1</div>
    <div class="left box-sizing">...B2</div>
    <div class="left box-sizing">...B3</div></div>

CSS

.left {
  float:left; 
  width:33.3%;
  border: 3px solid #333;
  
  background: #C0C0C0;
}

.box-sizing { box-sizing: border-box; margin: 0; }