Предложу такой вариант...
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
width:100%;
}
#green {
float:left;
height:200px;
width:50%;
min-width: 5%;
max-width: 95%;
background-color:green;
}
#green span,#red span{
background-color:#fff;
padding: 0 6px;
border:1px #000 solid;
}
#red {
float: right;
text-align:right;
height:200px;
width:50%;
min-width: 5%;
max-width: 95%;
background-color:red;
}
</style>
<script type="text/javascript">
(function(){
var AllClick=2;
var LeftClick=1;
var RightClick=1;
Out=function (){
var attLeft = Math.floor(100*LeftClick/AllClick);
var attRight=Math.floor(100*RightClick/AllClick)
attLeft+=100-attLeft-attRight;
document.getElementById('Left').innerHTML=''+ attLeft +'%';
document.getElementById('Right').innerHTML=''+ attRight +'%';
document.getElementById('green').style.width=''+ attLeft +'%';
document.getElementById('red').style.width=''+ attRight +'%';
}
return attitude = function(a){
AllClick++;
if(!a) {LeftClick++;}
if(a) {RightClick++;}
Out ();
}
})();
window.onload = Out;
</script>
</head>
<body>
<div id=red>
<span id="Right"></span>
<input type=button value=" Жми " onclick="attitude(1)" />
</div>
<div id=green>
<span id="Left"></span>
<input type=button value=" Жми " onclick="attitude(0)" />
</div>
</body>
</html>