Question

I have a fair amount of CSS knowledge, but I’ve been stumped while trying to achieve a unique navigation bar for a website I’m working on.

Since pictures are worth over 9000 words, I put together a diagram to represent the scenario.

The #container (blue) is 1000px wide and has 25px rounded corners. At the top of the container is the #navbar (green) which is the full width of the #container and is 55px high (it matches the top, left, and right edges of the #container, but I enlarged it in the image so you could see it better). Inside of the #navbar are the different navigation buttons (red). I want all of the buttons to be equally wide (and always stretch from one side to the other), and the buttons on the far left/right to have rounded corners like the grandparent #container. The solution need to be pure and strict CSS and work across most modern browsers (except IE 8 and under).

I want this to be a learning experience, so if you post the code, please provide some explanation.

Answer 1

HTML:

<nav>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</nav>

<div id="container">
</div>

You should probably turn that into a list…

CSS:

nav {
    display: table; /* see below */
    width: 1000px;
}
#container {
    height: 400px;
    width: 1000px;
    background: blue;
    border-radius: 0 0 25px 25px; /* top-left top-right bottom-right bottom-left */
}
nav span {
    display: table-cell; /* spreads them equally across, no matter how many elements */
    height: 55px;
    background: green;
}
nav span:first-child {
    border-radius: 25px 0 0 0;
}
nav span:last-child {
    border-radius: 0 25px 0 0;
}

Here’s the fiddle: http://jsfiddle.net/GHVSZ/