CODEWITHSUNDEEP
csslayouthtmlpositioning
gorn
gorn

Reputation: 8177

Positioning div elements horizontally, not vertically

Im designing a navigation bar; and tab links in it are made by CSS shapes. For this I use alot of position: absolute on child elements, and I have parent containers set to position: relative. I also set a hard height and plenty width for them, and it will not work. Not even with using overflow: ... My tab boxes positions vertically no matter what.

I have no clue at this point.

Divs inside "navBox" class div have position: absolute.

Click here (jsfiddle) for HTML and CSS code, and watch output results.

Thanks in advance

Upvotes: 21

Views: 72444

Answers (2)

ATOzTOA
ATOzTOA

Reputation: 35950

CSS: display: inline or display:inline-block.

Upvotes: 7

Eric Goncalves
Eric Goncalves

Reputation: 5353

You need your .navBox class to display: inline-block. Naturally the div element is set to display block which gives the element by default a width of 100%. Also, your list items to float: left because by default a list is displayed vertically, floating left allows you to display the list horizontal

updated jsFiddle: http://jsfiddle.net/qLKg7/4/

Upvotes: 17

Related Questions