Question

I have a UL html list that looks like this:

<div id="scroller">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
                <li>item 4</li>
            </ul>
</div>

and I have a css class called “selected”:

.selected {
    margin-left: 0px; 
    position: relative; 
    left: 0px;
}

When I set the class of the second item to “selected”, I expect the second element to push the first element out and move itself to the top of the screen but that doesn’t happen. Is there anything I need to add to the “selected” class to make that happen ? the width property for “li” is set to 50%.

Here is the sample code: http://jsfiddle.net/Lx6tw/

Answer 1

Here’s what you CSS class does:

.selected {
    margin-left: 0px;    //make left margin 0px
    position: relative;  //keep the element exactly where it was...
    left: 0px;           //EXCEPT move it 0px to the right
}

When I set the class of the second item to “selected”, I expect the
second element to push the first element out and move itself to left
of the screen but that doesn’t happen.

To make the element ‘move itself to the left of the screen’ you can do this if you just want it moved over a certain amount:

.selected {
    margin-left: 0px;    //make left margin 0px
    position: relative;  //keep the element exactly where it was...
    left: 50px;          //EXCEPT move it 50px to the right, AKA don't move it at all
}

I’m not exactly sure what you mean by ‘push the first element out’ as the position of an element that appears later in the document will not affect those that appear earlier unless you’re using CSS position on the first one. This might be what you’re looking for though:

.item1 {           //give this class to the item you want pushed out (the first one)
    position: absolute;  //take it out of the document flow
    left: 50px;          //and put it 50px from the left edge of its containing element
}

However, its very difficult to tell if this is anything near what you actually want. Could you describe what you want in more detail, or perhaps link to a website that demonstrates the desired behavior? 😀