Multiple FLOAT DIV and BORDER - html

Question

I've got an issue when i try to put 2 divs, both them them floating to the left side, one with width 80% and the other the 20%. Then i'd like to draw a border on the right side of the first div and a box-shadow of 5px, because each div has a different color.
So I've just searched on this site and i've found this solution:
Border issue in Floating div
But it's bad idea IMHO.... i've a resolution of 1920px width and i can't put 48% for the width of a DIV.... for 4px border i'll got a white space in the webpage for the 2% - 2px.
You could say, just add the background color to the body: i could because each DIV has already it's own, but it's also a problem OF SPACE, PROPORTIONS!!!
Another problem 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.
The last problem: 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?
Look at my code here http://jsfiddle.net/9gp6J/
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;
}

Answer 1

You could use the css3 feature calc(...) available in css3 depending on which browsers you are supporting this may suitable. Anything below IE9 doesn't support this so keep that in mind. Here's a fiddle:
http://jsfiddle.net/9gp6J/9/
Any other solution would have to involve negative margins such as:
div#contenuto_body{
...
margin-right: -4;
}
That should work anything IE7 and up.

Answer 2

for the border issue add a div inside the left div and give a right border to that inner div. This way the outer left div can remain 80% without the added 4px border problem.
HTML:
<div id="container">
<div id="left">
<div id="inner_left">
content left
</div>
</div>
<div id="right">
content right
</div>
</div>
CSS:
div#container {
height:200px;
}
div#left {
float:left;
width:80%;
height:100%;
background:red;
}
div#inner_left {
border-right:4px solid black;
height:100%;
}
div#right {
float:left;
width:20%;
height:100%;
background:green;
}
Check this jsfiddle