TalkPHP - floating list elements

TalkPHP (http://www.talkphp.com/forums.php)

- XHTML, HTML, CSS (http://www.talkphp.com/xhtml-html-css/)

- - floating list elements (http://www.talkphp.com/xhtml-html-css/3368-floating-list-elements.html)

sarmenhb

09-19-2008 11:49 PM

floating list elements

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.

All times are GMT. The time now is 03:44 AM.