html - div not spanning page width -

i've got 3 divs floating left inside container div. container has width of 100%, 3 inside divs have width of 33%. there no padding/margin on divs or body, yet still container div isn't spanning entire page, forcing inside divs overlap. please help, can't seem find answer here works me.

#container {    width: 100%;    margin: 0 auto;    padding: 0;  }  #left,  #middle,  #right {    float: left;    width: 33%;  }  body {    margin: 0;    padding: 0;    width: 100%;  }

<div id="container">    <div id="left">      <img src="http://placehold.it/100x350" height="350" alt="" />    </div>    <div id="middle">      <img src="http://placehold.it/100x350" height="350" alt="" />    </div>    <div id="right">      <img src="http://placehold.it/100x350" height="350" alt="" />    </div>  </div>

justin, in addition setting width of container 100%, try set position absolute or relative, this,

#container {   width: 100%;   margin: 0 auto;   padding: 0;   position: absolute; /*or relative, whatever solves it*/ } 

as said dividing body 3 equal divs each of width 33% leave white space. may try like, width=33.3333%

also, answers in questions helpful, css divide width 100% 3 column

good luck.