Question

I’m attempting to layout my header (logo and navigation) so that the logo is in the center of the page. Right now, everything works fine if the left and right navigation are the same width. But I’d like the logo be in the center of the page regardless of the width of the navigation elements. I’m not worried about the vertical alignment right now, just the horizontal.

• Logo Must be horizontally centered (with respect to the browser window)
• Need to have navigation elements on the left and right of the logo
• The number of navigation elements and widths of each element may vary (the left and right side will most likely differ in width)
• I want the header to be 100% width (the width of the browser window)
• The HTML and CSS can completely change from what I have listed
• Only use JavaScript for CSS selector/property fallback (i.e. Dean Edwards IE7), HTML5 support (i.e. shim/v), etc.

Example Code

jsFiddle

Logo / Navigation Mock-Up (nothing is to scale)

HTML

<header>
    <nav class="nav1">
        <ul>
            <li><a href="http://example.com">Hello World</a></li>
            <li><a href="http://example.com">Hello World</a></li>
            <li><a href="http://example.com">Hello World</a></li>
            <li><a href="">Hello</a></li>
        </ul>
    </nav>
    <img src="http://markschamel.com/upload/blue.square.png" />
    <nav class="nav2">
        <ul>
            <li><a href="">Hello World</a></li>
            <li><a href="http://example.com">Hello</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    width: 100%;
    text-align: center;
}
nav.nav1 {
    text-align: right;
    display: inline-block;
}
nav.nav2 {
    text-align: left;
    display: inline-block;
}
nav ul {
    overflow: hidden;
}
nav.nav1 li {
    float: left;
}
nav.nav2 li {
    float: left;
}

Answer 1

I solved my own question. It’s a little hack estimating the width of the ULs with percentages with min-width. There are a couple of other minor updates.

Demo: http://jsfiddle.net/S2ySk/3/

HTML

<header>
    <nav class="nav1">
        <ul>
            <li><a href="http://example.com">Hello World 1</a></li>
            <li><a href="http://example.com">Hello World 2</a></li>
            <li><a href="http://example.com">Hello World 3</a></li>
            <li><a href="">Hello</a></li>
        </ul>
    </nav>
    <img src="http://markschamel.com/upload/blue.square.png" />
    <nav class="nav2">
        <ul>
            <li><a href="">Hello World</a></li>
            <li><a href="http://example.com">Hello</a></li>
        </ul>
    </nav>
</header>

CSS

header {
    width: 100%;
    text-align: center;
    background-color: #c87137;
    white-space: nowrap;
}
nav {
    min-width: 40%;
    display: inline-block;
}
nav.nav1 {
    text-align: right;
}
nav.nav2 {
    text-align: left;
}
nav ul {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    background-color: #ff0000;
}
nav li {
    background-color: #008000;
    white-space: nowrap;
}
nav.nav1 li {
    float: right;
}
nav.nav2 li {
    float: left;
}