floating list elements

sarmenhb · 09-19-2008, 11:49 PM

hello,

when i float a list to the right, their order is reversed why is that?

for example if i have a list that is like this inside of a div element.

<ul>
<li>first</li>
<li>second</li>
<li>third</li>
</ul>

when i try to float it to the right (instead of showing it as first,second,third, it shows it as third,second,first.

anyone know why it is? anything i have to do?

Wildhoney · 09-20-2008, 12:59 AM

html4strict Code:

<html>
<head>

<style type="text/css">

    div
    {
        border: 1px solid red;
        width: 200px;
        overflow: hidden;

    }

    div ul
    {
        border: 1px solid blue;
        float: right;
        overflow: hidden;
    }

    div ul li
    {
        border: 1px solid green;
        float: left;
        overflow: hidden;
        width: 50px;
    }

</style>

</head>
<body>

<div>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
</div>  

</body>
</html>

Like that?

sarmenhb · 09-20-2008, 05:13 AM

change the div ul li to float right and u'll see how it changes the order.

Code:

    div ul li
    {
        border: 1px solid green;
        float: right;
        overflow: hidden;
        width: 50px;
    }

martins256 · 09-20-2008, 08:32 AM

I made you some samples :)

right
center
left

RobertK · 09-20-2008, 11:19 AM

Sarmen, the reason the order is reversed is that you float each element and not the list itself. So take each item from the top of the list down and float it right: you get what you have. Item 1 becomes 3, and 3 becomes 1.

The given examples show you a good way to float it on the right without reordering the list.