Problem with 3-column/floats & Mac IE 5

[bunner bob]

I've got a three-column fixed-width layout, in which I want all three columns the same length.

There are some great tutorials on this, but typically they use left and right borders of the "container" as backgrounds for floated left and right content. In my case, I need borders between the colums that run full-height, so I made my container just the width of the center column, then essentially set my left and right columns outside the center column with negative margins.

I've got it working well in Mozilla, Safari, Windows IE 5 & 6 but it's pretty munched in Mac IE 5. So far I'm only able to fix parts of it with some pretty radical margin numbers on the left and right floated columns. The center column is still shifted to the right by (what looks like) the amount of the width of the left column.

I guess I'm wondering whether I should even bother fixing it - how many Mac IE 5 users are left? Not too many according to my favorite stats page: http://www.upsdell.com/BrowserNews/stat.htm#source1

But I hate to disappoint people. Are there some pointers for dealing with floats and strange widths and Mac IE 5?

- Bob

CSS

#container {
	background: #333;
	position: absolute;
	width: 760px;
	left: 50%;
	margin-left: -380px;
}

.bodycontainer {
	overflow: visible;
	position: relative;
	left: 152px;
	width: 350px;
	border-left: 4px solid #232323;
	border-right: 4px solid #232323;
	background: #eee;
}

* html .bodycontainer {
	width: 358px;
	w\idth: 350px;
}

#left_col {
	float: left;
	position: relative;
	display: inline;
	width: 152px;
	margin-left: -156px;
}

#right_col {
	float: right;
	position: relative;
	display: inline;
	width: 218px;
	padding: 0 14px 20px 18px;
	margin-right: -250px;
}

* html #right_col {
	width: 250px;
	w\idth: 218px;
}

div.center_content {
	width: 310px;
	padding: 12px 20px 16px;
}

* html div.center_content {
	width: 350px;
	w\idth: 310px;
}

HTML:

<div id="container">
	<div class="bodycontainer">
		<div id="left_col"><!--NAV_BUTTONS--></div>
		<div class="white_text" id="right_col"><!--SIDEBAR_CONTENT--></div>
		<div class="center_content"><!--SUB_NAV--><!--CENTRAL_CONTENT--></div>
		<div class="clear"></div>
	</div>
</div>

- with the commented parts populated via PHP. Note also the outer "container" also holds header & footer, omitted here for simplicity.

[LJK]

Hi -
Have you checked out Paul's Kaboodle of Examples ;-)?

http://www.pmob.co.uk/temp/3colfixedtest_explained.htm

El

[bunner bob]

Good stuff - not too dissimilar from what I've read elsewhere, though this one's definitely going in the bookmarks list.

I'm averse to the tiling background image though. My experience (and what some of my testers have been reporting) is of a blink of page background-color before the background image loads. In my case I have dark left and right columns and a light center column, and the overall page color is dark, so the center column text is briefly black-on-black until the image loads, which feels a bit lame to me.

Not sure how many people will shoot me for this, but what I've done now is work a browser detector into the site that says "if you're using IE 5 Mac (or NN4 or IE4 Win), you should get a newer browser", along with links to Mozilla and IE downloads. The security on the site requires IE 5.0.1+ anyway, and the client's budget doesn't justify the time spent to dial it in for every sub-1% browser out there.

Heck, there are some out there that don't even bother with IE 5 Windows, which still has a modest share - more than my client would want to give up.

- Bob