Desperately seeking styles (3 column nested doc divs)

I¹m running into the IE CSS problems, and have tried various things with no
luck.
I¹m trying to get a multi column layout within the documentContent area ­see
attached.
I¹ve got the following additions in plonecustom.css working in all but IE ­
I know it¹s related to the width and padding bug in IE ­ is there a
solution?
I attached gif of what it looks like in Safari (there is a footer that is
not visible in the screenshot)
Using only divs to hold the actual content.

.docHeader {
padding: 2%;
text-align: center;
border-bottom: dotted #999999 1px;
}

.docMainContent{
padding: 2%;
text-align: justify;
margin-left: 24%;
margin-right: 24%;
border-right: dotted #666666 1px;
border-left: dotted #666666 1px;
}

.docLeftColumn {
padding: 2%;
float: left;
text-align: right;
width: 20%;
}

.docRightColumn {
padding: 2%;
float: right;
width: 20%;
}

.docFooter {
padding: 2%;
text-align: center;
clear: both;
}