float problem?

[mhunt]

http://mh-interactive.com

looks fine in firefox but then in IE the middle div just goes bonkers and is at the bottom of the page, any idea why?

[koyama]

You should be floating all three columns. Currently you are left floating your left column, right floating your right column while not floating your middle column. Instead you should be left floating all your columns: (Then again, in your document you will want to switch the order of your blocks.)

Also watch out setting heights: This is usually not necessary and main ruin layout when the user increases text size in his browser.

#navigation {
	float: left;
	width: 150px;
        ...
}
.mainBody {
	margin: 0 300px 0 150px; /* out */
        margin: 0;
	padding: 5px 10px 5px 10px;
	width: 300px;
	height: 400px;
        float: left;
        ...
}
.recentArticles {
	float: right; /* out */
        float: left;
	width: 225px;
	height: 385px;
}

[mhunt]

thank you