Positioning div elements horizontally, not vertically

Question

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

Answer 1

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/

Answer 2

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