Mon, 2007-11-26 15:04
Below is a code snippet where I have tried to get a horizontal menu centered. The ul is "somewhat" centered because I have set the width to 500px. Then the margin has something to work with. However, I would prefer to not set the width. The reason for that is because the text in the li's can change, AAA,BBB,CCC,DDD is just nonsense text.
So what I would like to achieve is for it to stay centered when different kinds of texts appear instead of AAA,BBB,CCC,DDD. I guess what needs to be done is for the ul to set its width "on-the-fly" so to speak. And how do I do that (if that thinking is correct)?
css
* {
padding: 0px;
margin: 0px;
}
body {
font: bold 16px verdana;
}
#footer {
width: 1000px;
height: 30px;
clear: both;
border: 1px solid red;
}
#footer a {
font-weight: bold;
color: #000;
}
#footernav ul {
margin: 0 auto;
width: 500px;
border: 1px solid green;
}
#footernav li {
float: left;
line-height: 30px;
padding: 0 15px;
border: 1px solid blue;
}
Mon, 2007-11-26 17:51
#1
http://www.cssplay.co.uk/menu
http://www.cssplay.co.uk/menus/centered_float_left.html
See if that give you any ideas 
Tue, 2007-11-27 10:01
#2
Thanks thepineapplehead,
Thanks thepineapplehead, that page displayed a way to solve my problem. Thanks a bunch 
For those that might find this thread with a similar problem, below is the edited code, that worked for me.
css
* {
padding: 0px;
margin: 0px;
}
body {
font: bold 16px verdana;
}
#footer {
width: 1000px;
height: 30px;
clear: both;
border: 1px solid red;
}
#footer a {
font-weight: bold;
color: #000;
}
#footernav ul {
margin: 0 auto;
list-style: none;
display: table;
white-space: nowrap;
border: 1px solid green;
}
#footernav li {
display: table-cell;
line-height: 30px;
padding: 0 15px;
border: 1px solid blue;
}
#footernav ul {
display: inline-block;
}
#footernav ul {
display: inline;
}
#footernav ul li {
float:left;
}
#footernav {
text-align: center;
}
Tue, 2007-11-27 19:02
#3
Thanks for getting back to
Thanks for getting back to us 