Two Div Block Side by Side

Ok! It should be a simple thing, but if you have to do with IE and Firefox it is not a simple thing.
It seems that IE and Firefox are two gilrs and the html is the only boy! If html goes with IE, Firefox is jealous and viceversa!
It seams that html is a short blanket and IE is the feet and Firefox is the face: if you want to cover the face then you have to uncover the feet and viceversa!
So you have to add some patch!
This is the case of two div blocks that have to place side by side: if you do something like:
.left {
float:left;
background-color:yellow;
width:20%;
}
.right {
float:right
background-color:blue;
width:80%;
}
is ok with Firefox, but with IE if the text inside the right block is larger than 80% the right block goes under the left one.
If i add a clear:left instruction in the right style it is good for IE but not for Firefox.
So this is my solution:
.left {
float:left;
background-color:yellow;
width:20%;
}
.right {
position:absolute;
left:21%;
background-color:blue;
width:79%;
}

I know that if the text inside the left div goes over the 20% it will go under the right div. if i will want to show all the content of the left div i will add overflow:auto instruction.