Trivial with Tables...

...But a head-pounder in CSS - Please help

[Lance]

I would have thought this should be easy...

I have 3 roll-over button <A> links that I want to appear side by side, and centered horizontally. Easy right? In a table, but how can I do this with CSS? floating gives me the buttons side by side well enough, but I can't seem to be able to contain the within a <div> that I can center.

If I don't float them, I get 3 perfectly centered buttons, but the are stacked vertically.

I give up. Please help me figure this out before I do something drastic and put them back into the (currently just commented out, but waiting to go back into service) table.

Thank you.

Relevent Code:

DIV.Buttons 
{ 
 MARGIN: 0px auto; 
 TEXT-ALIGN: center; 
 BORDER: red 1px solid; 
} 
A.Button 
{ 
 DISPLAY: block; 
 MARGIN: 0px 3px; 
 FLOAT: left; 
 BACKGROUND-IMAGE: url(/Images/ButtonBackground.gif); 
 HEIGHT: 25px; 
 WIDTH: 125px; 
 FONT-FAMILY: arial, sans-serif; 
 FONT-SIZE: 14px; 
 FONT-WEIGHT: bold; 
 COLOR: #000080; 
 LINE-HEIGHT: 25px; 
 TEXT-ALIGN: center; 
 TEXT-DECORATION: none; 
} 
A.Button:hover 
{ 
 BACKGROUND-POSITION: 0px -25px; 
} 
A.Button:active 
{ 
 FONT-SIZE: 13px; 
 BACKGROUND-POSITION: 0px -50px; 
} 
<div class="Buttons"> 
 <a class="Button" id="ra" tabindex="1" href="RequestAccess.asp">Request Access</a> 
 <a class="Button" id="li" tabindex="2" href="LogIn.asp">Log In</a> 
 <a class="Button" id="cu" tabindex="3" href="ContactUs.asp">Contact Us</a> 
</div> 

[Birdman]

Try adding:

width: 100%;

to the div.button class. Odds are, you'll be on center then.

[createErrorMsg]

One way to solve this is to restructure your menu as a LIST, rather than just a handful of links.

So this...
<div id="box">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>

becomes this...
<div id="box">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>

You'll need to keep the display:block and all hover effects on the <a> tag, but style the UL and LI tags as such...
#box ul {
list-style-type: none;
}

#box ul li {
display: inline;
float:left;
}

Now your floating List Items are lined up inside that UL tag, meaning if you can center the UL tag, you've centered the whole thing. So add margin: 0 auto; to the box containing the UL (it helps if it has an explicit width, but I don't think it's strictly necessary)...

#box {
width: 40.0em;
margin: 0 auto;
}

and you should be there. This also has the additional benefit of semantic happiness (since a list should be a list), which SEs like.

For more (a LOT more) on doing this check out Listamatic (the whole site) and A List Apart (article "Taming Lists").

And please, don't go back to the table. Seriously.

[Lance]

Thank you for the reply createErrorMsg. You were very close. I did end up having to explicitly size the UL to get it to center though. Without that it just expanded to fill available width.

Since the number of buttons I may have on any page will vary, I can just set the width of each <UL> with an inline style.

Here is how it all ended up:
(DIV.Buttons became superfluous, but I kept it for future use and because it's already there.)

DIV.Buttons 
{ 
} 
.Buttons UL 
{ 
 LIST-STYLE-TYPE: none; 
 MARGIN: 0px auto; 
 PADDING: 0px; 
 WIDTH: 393px; 
} 
.Buttons UL LI 
{ 
 FLOAT: left; 
} 
.Buttons A 
{ 
 BACKGROUND-IMAGE: url(/Images/ButtonBackground.gif); 
 DISPLAY: block; 
 HEIGHT: 25px; 
 WIDTH: 125px; 
 MARGIN: 0px 3px; 
 FONT-WEIGHT: bold; 
 COLOR: #000080; 
 LINE-HEIGHT: 25px; 
 TEXT-ALIGN: center; 
 TEXT-DECORATION: none; 
} 
.Buttons A:hover 
{ 
 BACKGROUND-POSITION: 0px -25px; 
} 
.Buttons A:active 
{ 
 FONT-SIZE: 13px; 
 BACKGROUND-POSITION: 0px -50px; 
} 
<div class="Buttons"> 
 <ul> 
 <li><a id="ra" href="RequestAccess.asp">Request Access</a></li> 
 <li><a id="li" href="LogIn.asp">Log In</a></li> 
 <li><a id="cu" href="ContactUs.asp">Contact Us</a></li> 
 </ul> 
</div> 

Thanks again for your help.