CODEWITHSUNDEEP
htmlcss
kwikness
kwikness

Reputation: 1445

Centering My Floated ul

I can't seem to get my menu to center properly. Can anyone see an issue?

    ul#navigation {
        float: left;
        margin: 0 auto;
        padding: 0;
        list-style-type: none;
        min-width: 100px;
        background: #003d4c;
        padding-bottom: 15px;
        text-align: center;
    }

    ul#navigation li {

        border: 1px black solid;
        min-width: 100px;
        background-color: white;
        list-style-type: none;
        display: inline-block;
    }

    ul.sub_navigation {
        position: absolute;
        display: none;
    }

    ul.sub_navigation li {
        clear: both;
    }

    a, a:active, a:visited {
        display: block;
        padding: 10px;
    }

    #header{
        text-align: center;
        padding: 10px 20px;
    }

Here's the HTML:

<div id="container">
    <div id="header">
        <br />
        <ul id="navigation">
            <li class="dropdown"><a href="#"></a>
                <ul class="sub_navigation">
                    <li><a href="#">Sub Navigation 1</a></li>
                    <li><a href="#">Sub Navigation 2</a></li>
                    <li><a href="#">Sub Navigation 3</a></li>
                </ul>
            </li>
            ...

Upvotes: 0

Views: 39

Answers (2)

kwikness
kwikness

Reputation: 1445

The solution I decided to use was to wrap the main ul in a div with this CSS:

.menuContainer {
    display: table;
    margin: auto;
}

Upvotes: 0

Pevara
Pevara

Reputation: 14310

Centering your navigation is a common, yet not an easy problem, ,especially if you want it to be cross browser comaptible. There is a very good technique i always use, wich is very well explained on this page.

Basicly it comes down to this:

  • you float your container div left, give it a width of 100% and a position relative
  • you float your ul left, and give it a relative postion left of 50%
  • you float your li left, and give it a position relative right of 50%

Check out the link for a thorrow explanation with example

Upvotes: 1

Related Questions