Centered fluid width navigation with floating links thanks to fit-content

We all know the problem that an element, that contains floating elements can’t be centered with margin: 0 auto; because it has no real width. But there is something coming our way that will change this situation for the better: fit-content

Just apply fit-content to the container of floating elements and oh see, you can use margin: 0 auto;

<div class="container">
    <ul class="list-centered">
        <li>Lorem ipsum</li>
        <li>Dolor sit amet</li>
        <li>Constetetur</li>
    </ul>
</div>
.container {
    width: 600px;
}

.list-centered {
    margin: 0 auto;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;
}

.list-centered li {
    float: left;
}

Browser support is, as one could expect, poor at the moment but the cool things always start out like that. So if you know you’re only building for Chrome and Firefox you can go ahead and use it right now.

I made a CodePen to show it in action:

Check out this Pen!

One Comment

  1. oakley sunglasses outlet

    Monday, 29 July 2013 at 20:40

    Surprise, great webpage theme! How long have you been blogging for? you make blogging look easy. The complete look of your blog is amazing, let alone the written content!