CODEWITHSUNDEEP
htmlcss
b-m-f
b-m-f

Reputation: 1328

Seperate 2 logical units on one line in header with css

What I want to do is have two logical navigation units in my header. the one with [1,2,3,4,5] should be on the left side and the one with [6,7,8] on the right.

Right now I have the following HTML code

<div id="firstNav">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
    </ul>
</div>
<div id="secondNav">
    <ul>
        <li><a href="#">6</a></li>
        <li><a href="#">7</a></li>
        <li><a href="#">8</a></li>
    </ul>
</div>

and the following CSS

#firstNav ul li{
    display: inline-block;

}

#firstNav {
    float:left;
}

#secondNav ul li{
    display: inline-block;

}

#secondNav {
    float:right;
}

My Problem is, that if I dont use the inline-block everything is vertical not horizontal and then I force it to be horizontal afterwards in the individual child <li> item.

Is this an acceptable way of achieving what I want or can somebody give me a better/more elegant solution?

Upvotes: 0

Views: 39

Answers (1)

undeletable
undeletable

Reputation: 1590

#firstNav, #firstNav ul li, #secondNav ul li {
    float:left;
}
#secondNav {
    float:right;
}

Looks like that's what you need.

Upvotes: 2

Related Questions