How to evenly space div columns in a fixed layout

HTML & CSS
1

Wrapper width = 990px
Column width = 280px ( there are three columns)

If I float them, then I need to use margins to space them out. However when I use margin right for example, the 3rd column obviously can’t sit aligned to the very right side of the page, vice-versa if I were to use margin left.

What I ended up doing was floating the first and second column left and the third column right. Then gave the second column a margin left equal to half the space remaining between the second and third column. VIOLA!

However, I had to give each column a separate ID so I could give them the necessary attributes to make this work, therefore making my CSS much longer than I wanted to. Anyway around this?

2

840px is the value of 280*3 so that means you have 150px worth of free space.

You are going to have to give each column an ID or something. I’d float everything left. Even if you just write 3 rules, one for each column, that’s not very long CSS…You shouldn’t be having an issue/complaining about something as short as that :).

I’d personally (depending on how it looked) just give each column some left and right margins to space it out and make it look equally spaced out, and that way the left wouldn’t sit on the left border, and the right wouldn’t be a hundred pixels away from the border.

3

Hi,

If ie7+ support was only needed then you could use the pseudoclass :first-child like so:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style ty=e"text/css">
#outer {
	border:1px solid #000;
	background:#ccc;
	width:990px;
	overflow:hidden;
	margin:auto;
}
.column {
	float:left;
	width:280px;
	margin:0 0 0 75px;
	background:#eee;
	min-height:100px;
}
#outer .column:first-child{margin-left:0}

</style>
</head>

<body>
<div id="outer">
				<div class="column">column</div>
				<div class="column">column</div>
				<div class="column">column</div>
</div>
</body>
</html>

If Ie6 support was needed then you would need an extra inner element and do something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style ty=e"text/css">
#outer {
	border:1px solid #000;
	background:#ccc;
	width:990px;
	overflow:hidden;
	margin:auto;
}
.inner {
	margin:0 0 0 -75px;
	zoom:1.0;/* ie6/7 hacks*/
	position:relative;/* ie6/7 hacks*/
}
.column {
	float:left;
	width:280px;
	margin:0 0 0 75px;
	background:#eee;
	min-height:100px;
	display:inline;/* ie6 hack*/
}
</style>
</head>

<body>
<div id="outer">
		<div class="inner">
				<div class="column">column</div>
				<div class="column">column</div>
				<div class="column">column</div>
		</div>
</div>
</body>
</html>
4

Replying to the OP. It would seem to me you ONLY need to give the last element a class or ID to override the margin-right and set it back to 0. something like div.last{margin-right:0}, that would be the easiest most supported fix.

Of course you may not have access to the HTML.

An alternate solutions to Paul’s FIRST suggestion, but offering similar support with regards to IE6… %&*^#&$%%‡!!!^@&^ IE6!!


.column {
	float:left;
	width:280px;
	background:#eee;
	min-height:100px;
	display:inline;/* ie6 hack*/
}
.column + .column{margin-left:75px;}