IE6 Displaying Odd

**bige2533** · 10-21-2009, 05:40 PM

I'm using a container with boxes to display as columns. The first box displays ok for the most part. But, the content for the second box is in the right box but it starts below the content from the first box.

See this:
http://www.trailsticker.com

**bige2533** · 10-21-2009, 05:43 PM

Sorry, here's the CSS.

Code:

body { font-size : 10pt; 
font-family : verdana, geneva, arial, helvetica, sans-serif; 

} 
p.leftAlign { text-align : left; 
padding-left : 10px; 

} 
h1 { font-size : 14px; 
font-weight : bold; 

} 
#wrapper { margin : 0 auto; 
width : 100%; 
position : relative; 
overflow : auto; 

} 
#boxWrap { background-color : white; 
width : 100%; 
margin : 0 auto; 
text-align : center; 
overflow : hidden; 

} 
.box1 { background-color : #7abe61; 
margin-top : 0; 
margin-right : 0; 
margin-left : 0; 
margin-bottom : -32767px; 
padding-bottom : 32767px; 
height : auto; 
width : 25%; 
float : left; 

} 
.box2 { background-color : white; 
margin-top : 0; 
margin-right : 0; 
margin-left : 0; 
margin-bottom : -32767px; 
padding-bottom : 32767px; 
height : auto; 
width : 75%; 
float : right; 

} 
#styleCopyright { margin : 0 auto; 
font-family : verdana, geneva, arial, helvetica, sans-serif; 
text-align : center; 
font-size : smaller; 
width : 900px; 
color : white; 

} 
div#styleCenter { margin : 0 auto; 
width : 100%; 
background-color : white; 
font-family : verdana, geneva, arial, helvetica, sans-serif; 

} 
#styleCenterHeader { margin : 0 auto; 
width : 900px; 

} 
div#contentBackground { height : 100%; 
width : 100%; 
padding : 5px; 
font-family : verdana, geneva, arial, helvetica, sans-serif; 

} 
div#contentBackgroundProduct { height : auto; 
width : 85.5%; 
margin : 0 auto; 
padding : 10px; 

} 
div#grayShading { background-color : silver; 
height : auto; 
width : 900px; 
border : 10px solid silver; 
margin : 0 auto; 

} 
div#googleSearch { padding : 10px; 
width : 150px; 
font-family : verdana, geneva, arial, helvetica, sans-serif; 

} 
.list { text-align : left; 
font-size : smaller; 
color : white; 

} 
.contactLabel { text-align : left; 
padding : 10px 10px 10px 10px; 

} 
a.whiteLink:link, a.whiteLink:visited, a.whiteLink:active, a.whiteLink:hover { color : white; 
text-decoration : none; 

} 
a.blueLink:link, a.blueLink:visited, a.blueLink:active { color : #49cde5; 
text-decoration : none; 

} 
a.blueLink:hover { color : #7abe61; 

} 
#scroller { width : auto; 
height : auto; 

} 
.clear { float : none; 

}

**vangogh** · 10-21-2009, 10:54 PM

I'm not seeing it in your code, but the problem you're having is typical for IE6 when the two boxes end up being wider than the container. The common causes are the double margin float bug where you float and add a margin in the same direction (left/left or right/right). IE6 doubles the margin. The other cause is how IE6 mishandles the box model. In that case it's usually the width of any border you've added to one or both of the boxes that adds the extra width.

I didn't see either of those in your code. I'm wondering if it has to do with your use of % for the widths instead of px. Since you're constraining the page in a fixed width wrapper anyway try assigning widths in px to each of the boxes and the wrapper and see if that helps.

**bige2533** · 10-28-2009, 02:37 PM

Thanks. I lowered the % of the second box and now it looks better.

**vangogh** · 10-28-2009, 04:37 PM

Glad you were able to sort it out.