Centering with CSS + float attribute

Posted on 2007-08-12
Last Modified: 2013-11-19
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>
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)?

Question by:tjgquicken

    Author Comment

    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.

    Author Comment

    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.
    LVL 30

    Accepted Solution

    Hello tjgquicken,

    Here is a way to center a floated menu of unknown width

    Here is a horizontal menu without using floats



    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Read about why website design really matters in today's demanding market.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now