properly defining widths of two adjacent columns

[B McDonald]

Hi. There is an inconsistency in the rendering of my side-by-side content
and nav columns across the browsers I've tested on. In particular, IE6
renders the margin between the two columns too close; IE5.5 renders the
space too wide. I am wondering if I am incorrectly setting the width
properties of my box model. Here are links to the page and the CSS:

http://www.galtsvalley.com
http://www.galtsvalley.com/css/default.css

The problem DIV is called #MidSection - and the two columns within that are
#MidCol-1 and #MidCol-2. The style from all three divs follows.

Brian

---

#MidSection {
position: relative;
height: 100%; /* needed for proper IE5.5 bg-color */
background-color: #fff;
border-left: 4px solid black;
padding: 0;
margin: 0 0 0 0;
}
#MidCol-1 {
float: left;
width: 63%;
background-color: #fff;
border-bottom: 5px solid black;
padding: 0 0 5% 0; /* top right bot left */
margin: 0 0 5% 1%;
}
#MidCol-2 {
float: right;
width: 30%;
min-width: 160px;
background-color: #cc9;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 2px solid #444;
border-right: 2px solid #000;
padding: 1% 2% 1% 2%; /* top right bot left */
margin: 0 0 5% 0;
}

[B McDonald]

This problem persists for me. It's a real catch-22. If I make it look right
in IE5.5, it looks way wrong in IE6. If I make it look right in IE6,
vice-versa. Another question: why can't I make the total width of the two
columns equal to 100%? If I do I get the contents of a column dropping down.
I'm confused.

Does anyone test their CSS in IE5.5?

Brian

---

#MidSection {
position: relative;
height: 100%; /* needed for proper IE5.5 bg-color */
background-color: #fff;
border-left: 4px solid black;
padding: 0;
margin: 0 0 0 0;
}
#MidCol-1 {
float: left;
width: 63%;
background-color: #fff;
border-bottom: 5px solid black;
padding: 0 0 5% 0; /* top right bot left */
margin: 0 0 5% 1%;
}
#MidCol-2 {
float: right;
width: 30%;
min-width: 160px;
background-color: #cc9;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-bottom: 2px solid #444;
border-right: 2px solid #000;
padding: 1% 2% 1% 2%; /* top right bot left */
margin: 0 0 5% 0;
}