IE6 issue using float for layout

Forum Moderators: not2easy

Message Too Old, No Replies

IE6 issue using float for layout

alkaline39

5:35 pm on Jan 15, 2007 (gmt 0)

When viewing in IE6 you will notice the whitespace gap between the green and red areas. Using IE7 and Firefox this isnt an issue. Does anyone have any ideas to solve this?

#sidebar {
padding: 0;
margin: 0;
height: 500px;
width: 370px;
float: left;
border-right: 1px solid #000;
background: #DAECA1;
}

#content {
padding: 0;
margin: 0;
height: 500px;
margin-left: 370px;
background: red;
}
</style>

</head>
<body>

</body>
</html>

Fotiman

8:00 pm on Jan 15, 2007 (gmt 0)

Do a google search for IE 3 pixel text-jog and you'll find a solution. I'd list it here but don't have the time at the moment...

alkaline39

9:38 pm on Jan 15, 2007 (gmt 0)

[positioniseverything.net...]

Thankyou. When I first implemented the hack by adding

* html #sidebar {
height: 1%;
}

it didnt work. Removing height: 500px; from #content made it display correctly.

Any thoughts on this?

EDIT: When adding content into #content such as

#orange {
height: 40px;
background: blue;
}

There is still the 3 pixel gap. Adding a red background to #content shows that the hack worked partially, but i'm not sure what to do when it comes to adding content.

alkaline39

1:09 am on Jan 17, 2007 (gmt 0)

Just to clarify, this is what I have now. #content works with the 3 pixel gap hack, but the #orange which is inside #content seems to have the same bug which I dont understand why, as its not floated against anything.

body {
margin: 0;
padding: 0;
}

#sidebar {
width: 370px;
float: right;
border-left: 1px solid #000;
background: #DAECA1;
}

* html #sidebar {
height: 1%;
}

#content {
margin-right: 370px;
background: red;
}

#orange {
height: 40px;
background: lightblue;
border-bottom: 1px solid #000;
}

Setek

1:17 am on Jan 17, 2007 (gmt 0)

Position is Everything's article on the 3px gap actually states putting

height: 1%;

to everything inside the

#content

, the non-floated section.

Thus:

#sidebar { float: right;
width: 370px; }
#content { margin-right: 370px; }

Then IE 6 only (using conditional comments or something similar, PiE uses the tan hack with the backslash hack combined):

#content * { height: 1%; }

This will set every object within

#content

to that height, which, by PiE's article, fixes it.