CODEWITHSUNDEEP
htmlcsscss-floathtml-lists
Brie
Brie

Reputation: 2359

How to float a ul in both directions?

Is it possible to have a "menu bar" made from a single ul and then float some lis to the left and some to the right? So my code right now is

<body>
    <header><nav><ul>
        <li><a href="pg1.html">Menu1</a></li>
        <li><a href="pg2.html">Menu2</a></li>
        <li><a href="pg3.html">Menu3</a></li>
        <li><a href="pg4.html">Menu4</a></li>
    </ul></nav></header>
    ...
</body>

And the css:

header > nav {
    background-color: red;
    height: 2em;
}
header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    float: left;
    padding: 0 1em;
}
header > nav > ul > li > a {
    display: block;
    font-family: 'Tahoma';
    color: white;
    line-height: 2em;
}
a:hover {
    color: yellow;
}
a {
    text-decoration: none;
}

The menu items are all of course on the left, but can some be floated to the right without changing the HTML "significantly?"

Upvotes: 0

Views: 405

Answers (2)

RaneWrites
RaneWrites

Reputation: 278

In your stylesheet create another class or id for list elements that float right. Here is a jsfiddle that I did to demonstrate:

http://jsfiddle.net/Z55hz/

stylesheet

header > nav {
    background-color: red;
    height: 2em;
}
header > nav > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
header > nav > ul > li {
    float: left;
    padding: 0 1em;
}

li.other {
    float:right;

}

header > nav > ul > li > a {
    display: block;
    font-family: 'Tahoma';
    color: white;
    line-height: 2em;
}
a:hover {
    color: yellow;
}
a {
    text-decoration: none;
}

HTML

<body>
     <header><nav><ul>
        <li><a href="pg1.html">Menu1</a></li>
        <li class="other"><a href="pg2.html">Menu2</a></li>
        <li><a href="pg3.html">Menu3</a></li>
        <li class="other"><a href="pg4.html">Menu4</a></li>
    </ul></nav></header>
    ...
</body>

Upvotes: 1

msussman
msussman

Reputation: 56

You could add a class to the list items that you want on the right, and then add a CSS rule for float:right;

Example:

Add to your CSS:

    .right {
        float:right;
    }

Replace your HTML5 with this

 <header><nav><ul>
    <li><a href="pg1.html">Menu1</a></li>
    <li><a href="pg2.html">Menu2</a></li>
    <li class="right"><a href="pg3.html">Menu3</a></li>
    <li class="right"><a href="pg4.html">Menu4</a></li>
</ul></nav></header>

Another option would be to create 2 div's (one that floats left, the other floats right) and then put one list within each div.

Upvotes: 2

Related Questions