468,768 Members | 1,669 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,768 developers. It's quick & easy.

properly defining widths of two adjacent columns

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;
}
Jul 20 '05 #1
1 1783
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;
}

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Rachel Devons | last post: by
2 posts views Thread by TB | last post: by
1 post views Thread by Jeff | last post: by
5 posts views Thread by Steve Bugden | last post: by
reply views Thread by =?Utf-8?B?Z3V5?= | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by Marin | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.