title: Multiple FLOAT DIV and BORDER
body: <p>I've got an issue when i try to put <strong>2 divs, both them them floating to the left side</strong>, <strong>one with width 80% and the other the 20%</strong>. Then i'd like to draw a <strong>border on the right side of the first div</strong> and a <strong>box-shadow of 5px</strong>, because each div has a different color.</p>
  
  <p>So I've just searched on this site and <strong>i've found this solution</strong>: 
  <a href="https://stackoverflow.com/questions/9000142/border-issue-in-floating-div">Border issue in Floating div</a></p>
  
  <p>But <strong>it's bad idea IMHO</strong>.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... <strong>for 4px border i'll got a white space in the webpage for the 2% - 2px</strong>. 
  You could say, just add the background color to the body: i could because each DIV  has already it's own, but <strong>it's also a problem OF SPACE, PROPORTIONS</strong>!!!</p>
  
  <p><strong>Another problem</strong> i'm experiencing with: i've set the height 100% (on the second div, 20% width)and it works in the example; but in the real website, which is the height also set to 100% the DIV doesn't occupy the whole height of the column but just until the margin limit of the last image.</p>
  
  <p><strong>The last problem</strong>: box-shadow with floating div it's bad idea... 
  should i put the box-shadow on the last div, just for the left side, instead of the right side for the previous div?</p>
  
  <p>Look at <strong>my code here</strong> <a href="http://jsfiddle.net/9gp6J/" rel="nofollow noreferrer">http://jsfiddle.net/9gp6J/</a></p>
  
  <pre><code>div#contenuto_body{
      margin: 0 0;
      padding: 0 0;
      float: left;
      width: 80%;
      height: 100%;
  
      background-color: #C90;
  
      -moz-box-shadow: 0 0 5px 1px #333;
      -webkit-box-shadow: 0 0 5px 1px #333;
      -ms-box-shadow: 0 0 5px 1px #333;   
      box-shadow: 0 0 5px 1px #333;
  
      border-right: 4px solid #E6B800;
  }
  
  body{
      margin: 0 0;
      padding: 0 0;
  }
  
  div#ads{
      margin: 0 0;
      padding: 0 0;
      width: 20%;  
      float: left;
      height: 100%;
  
      background-color: #CCC;
  }
  
  div#ads img{
      width: 70%;
      max-width: 200px;
      display: block;
      margin: 25% auto;
  }
  </code></pre>