The code provided in the question works for everything I need, except for IE6 and IE7.
I decided to add the following to my layout to replace the original body tag.
<!--[if IE 6]> <body class="ie6"> <![endif]-->
<!--[if IE 7]> <body class="ie7"> <![endif]-->
<!--[if gt IE 7]><!--> <body> <!--<![endif]-->
With that in place I can use the following styles as an addition to the styles already defined in the question.
.ie6 .header-wrapper,
.ie7 .header-wrapper {
text-align: center;
vertical-align: text-bottom;
height: 85px;
}
.ie6 .header-left-box,
.ie7 .header-left-box {
float: left;
width: 25%;
height: 82px;
}
.ie6 .header-right-box,
.ie7 .header-right-box {
float: right;
width: 25%;
height: 82px;
text-align: right;
}
.ie6 .header-center-box,
.ie7 .header-center-box {
padding: 4px;
margin-left: 26.2%;
margin-right: 26.2%;
width: 40%;
}
This handles everything I need the columns to do for all browsers, including the column wrapping in IE6 and IE7.