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;
}

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
[color=blue]
> ---
>
> #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;
> }
>
>[/color]