Positioning div elements horizontally, not vertically

css layout html positioning
gorn picture gorn · Dec 18, 2012 · Viewed 48.9k times · Source

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

Eric Goncalves picture Eric Goncalves · Dec 18, 2012

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/

Related questions

Vertical layout with CSS without using breaking elements?

Is it possible to implement vertical layout with CSS only, and not with HTML elements? I have a list of divs inside one div. By default the next element is right to the last, when there's no place on right, …

Read More
CSS - Expand float child DIV height to parent's height

I have the page structure as: <div class="parent"> <div class="child-left floatLeft"> </div> <div class="child-right floatLeft"> </div> </div> Now, the child-left DIV will have more content, …

Read More
What is a clearfix?

Recently I was looking through some website's code, and saw that every <div> had a class clearfix. After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix? Could you …

Read More