CODEWITHSUNDEEP
htmlcss
tkbx
tkbx

Reputation: 16275

Arrange divs like images?

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.

Upvotes: 1

Views: 131

Answers (3)

ianbeks
ianbeks

Reputation: 2228

I'd advise using a clearfix solution on your outer div #div. Then float:left on all the #nav div children.

Upvotes: 2

Jonah Bishop
Jonah Bishop

Reputation: 12571

The display: inline-block style rule will do the trick, but it has some drawbacks. See CSS display: inline-block: why it rocks, and why it sucks for more details.

I might also suggest using a list instead of divs for navigation elements. That's a common strategy which results in (hopefully) clearer markup.

Upvotes: 2

eliah
eliah

Reputation: 2277

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

Upvotes: 2

Related Questions