Question

I’d like to have a navigation bar (#nav), and have each nav item be a div (#nav div). This doesn’t work well, however. Here’s what I’m trying:

#nav {
    background: url("navbg.png"); /* navbg.png is 1x40 pixels */
    height: 40px;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    text-align: center;
}
#nav div {
    width: 200px;
    height: 40px;
    background: url("Selected.png"); /* Selected.png is 200x40 pixels */
    text-align: center;
}

When I do this with two divs in the #nav div, one shows up on the left, and one is below. When I do this, but with display: inline; in #nav div, it’s centered, but the divs don’t have any background, and the text in the two divs show up side-by-side.

I’d like the divs to work like images, being affected by text-align: center; and showing up side-by-side.

Answer 1

Try display: inline-block or float: left on #nav div