CSS align 3 elements

PureMisery

10-04-2007, 04:24 AM

I'm trying to get 3 elements evenly spaced on the same line.

<div style="width:650px;height:385px;">
<div style="float:left">Item 1</div>
<div>Item 3</div>
<div style="float:right;">Item 2</div>
</div>

I had it working fine for 2 items but I can't get a 3rd to evenly space itself between 1 and 2. I've tried every combination of placement styles that I could think of. I know it can be done with tables but I want to try and stay away from those.

Any help is appreciated.

coothead

10-04-2007, 04:53 AM

Hi there PureMisery,

hopefully this will put you out of your misery. ;)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
#container {
width:650px;
height:385px;
}
#right {
float:right;
}
#left {
float:left;
}
#center {
text-align:center;
}
</style>

</head>
<body>

<div id="container">
<div id="right"">Item 2</div>
<div id="left">Item 1</div>
<div id="center">Item 3</div>
</div>

</body>
</html>
coothead

PureMisery

10-04-2007, 05:22 AM

Hrm, that works exactly how I need it to until I stick it into my actual site. I guess I need to play around with the other CSS code on my site to see whats causing it to act screwy. Thanks coot.

coothead

10-04-2007, 10:58 AM

No problem, you're welcome. ;)