Link to home
Start Free TrialLog in
Avatar of tjgquicken
tjgquicken

asked on

Centering with CSS + float attribute

I'm trying to use CSS to center a menu bar across the page. The problem is that the menu bar uses the float attribute to get the menus to line up properly. I thought I could do something like this:
<div style="width: auto; margin: 0 auto; text-align: center">
   <ul  style="display: block; margin: 0 auto">
      <li style="display: block; float: left;">text1</li>
      <li style="display: block; float: left;">text2</li>
      etc.
However, this only results in all the <li> list items lining up in a single row (which is what I want) against the left border of the page (which isn't what I want). It looks like the problem is that "width: auto" attribute in the <div> tag, because the browser lets that element take up 100% of the page, instead of fitting it right around the <ul> element. When I put an actual value in there (i.e., "width: 500px"), I get the effect I'm looking for, but I'm told that's not a good practice to follow. So, how do I get the <div> tag to shrink to the right size (or is there some other hack I can employ)?

Thanks.
Avatar of tjgquicken
tjgquicken

ASKER

Addendum: This page from Adobe labs confirms that the <ul> tag (presumably all block level tags) must have a width in order to be centered.
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.html#centeringmenubar
I meant that <div> tag above...

Unfortunately, that doesn't solve the problem. If the bounding box for the <div> element is larger than the bounding box for the <ul> element, then the <ul> is floated to the left of the <div> and not centered.
ASKER CERTIFIED SOLUTION
Avatar of Mark Steggles
Mark Steggles
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial