In Internet Explorer 6, float right isn't working, appears at the bottom

HTML & CSS
1

As the title says Internet Explorer 6 is not recognising the float right - Map appears on the bottom. Please view the image of the problem here: http://i56.tinypic.com/1zbarrr.jpg. Can someone please help me fix this? Thanks in advance.

Here is my html:

<div id="contentWrapper">
<div class="headings">
<div class="contentLeft">
<h2>Facilities</h2>
<div class="row">
<ul>
<li>5 Artesian Thermal Pools on site for guests to use (1 cold pool during summer monnths)</li>
<li>New spacious 1 &amp; 2 bedroom villas</li>
<li>Basic Ensuite Cabins</li>
<li>Tennis Court</li>
<li>Kiosk (Meals available daily)</li>
</ul>
<p><a href="#">Read more…</a></p>
</div>
</div>
<div class="contentMiddle">
<h2>Attractions</h2>
<div class="row">
<h3>Public Transport</h3>
<p>Local bus service picks up 3 times per day at the entrances of the park.</p>
<p>Moree is accessible by train and coach travel and we are happy to provide transfers to/from the local station terminal.</p>
<p><a href="#">Read more…</a></p>
</div>
</div>
<div class="contentRight">
<h2>Map</h2>
<div class="row">
<a href="http://gwydircarapark.com.au/website/wp-content/uploads/2011/10/map-large1.jpg" rel="lightbox"><img src="http://gwydircarapark.com.au/website/wp-content/uploads/2011/10/map-small.jpg" alt="Map small" title="Map small" width="220" height="167" class="alignnone size-full wp-image-26" /></a></p>
</div>
</div>
</div>
</div>

Here is my css:


#contentWrapper {
	width: 100%;
	overflow: hidden;
	margin-top: 10px;
	color: #025c90;
}

.headings {
	background: url('images/titlebar.gif') no-repeat;
	width: 850px;
	height: 40px;
}

h2 {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 22px;
	float: left;
	width: 30%;
}

.contentLeft {
	float: left;
	width: 30%; /* 283px */
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 25px;
}

.contentLeft ul {
	margin-left: 30px;
	margin-right: 10px;
	margin-bottom: 1em;
}

.contentLeft li {
	list-style: disc;
}

.contentMiddle {
	float: left;
	width: 30%;
	margin-top: 10px;
}

.contentMiddle p {
	margin-right: 10px;
}

.contentRight {
	float: right;
	width: 30%;
	margin-top: 10px;
	line-height: 0.8em;
}

.contentRight p {
	background: url('images/click-to-enlarge.gif') no-repeat;
	width: 220px;
	height: 24px;
}

.row {
	width: 283px;
	margin-top: 3em;
}
2

IE6 has a double margin bug where they are they appear twice as big, there are a few different ways to fix it but because your code is pretty simple using the _ IE6 hack might be a good way to go. To use it simply see the below example:

.contentMiddle {
    _margin-right: 5px;
}

From there you can adjust it till it matches what you see in other browsers, personally i wouldn’t bother supporting IE6 just because the chance of someone actually using it to see your website is slim to none.

3

Thanks SgtLegend. I have tried your hack, but now am fed up with IE6 and as you said it will be a slim chance that someone will be using IE6, so I am fed up with that version, and have decided to not support that version any more.