Question

I’m having a problem with positioning my navigation element.

CSS:

#wrapper { width: 600px; margin: 0 auto; height: 300px; background: #f9f9f9; border: 1px solid #f0f0f0; }
#navigation { margin: 0 auto; text-align: center; }
.mylink { background: #666; color: #ccc; padding: 5px 10px; display: inline-block; }
.mylink:first-child { -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-left-radius: 10px; }
.mylink:last-child { -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; border-top-right-radius: 10px; }

HTML:

<div id="wrapper">
    <div id="navigation">
        <a class="mylink">Homepage</a>
        <a class="mylink">Second Page</a>
        <a class="mylink">Third Page</a>
    </div>
</div>

I want to remove the margins on the inline elements.
I tried a “float:left” variation too. But than I can’t center the elems without a width value.

Any ideas how i can solve it?

Answer 1

You don’t have a margin, inline elements just take whitespace (spaces, tabs, newline, whatever other invisible separators might be there) into consideration, either use block display and floats or type it without whitespace, updated your fiddle http://jsfiddle.net/Rnmbx/1/