Quote Originally Posted by !designer! View Post
Ok, I have added display: inline to .contentLeft, and have changed the percentages to pixels, and still nothing has changed in Internet Explorer 6. So can someone please tell me some other way of solving this? Thank you for everyones help so far. These problems make me wish my clients' website users don't use Internet Explorer at all.
You must be precise and this is basic mathematics.

Inside .contentRight which is 270px wide you have a nested div called .row which you have made 283px wide.! How can they fit?

The answer is that it can't possibly fit and in an attempt to help you out IE6 stretches the parent to accommodate the larger inner element which has a knock on effect in that the float no longer fits in the allotted space. Other browers hide the overflow instead so they don't drop but the error is yours and not the browsers because you have told it to do something that doesn't add up and therefore has to error handle.

Just change the width of .row to match the parent and the layout will work in IE6 with no problem.

.row {
	width: 270px;
	margin-top: 3em;

Quote Originally Posted by victorinox
.contentLeft, .contentMiddle, .contentRight {
float: left;
margin: 0 0 0 15px;
width: 260px;
You will still get the double margin big on the first float in IE6 unless you add display:inline (although with your reduced width it should still fit bit won't be identical.)