Float right is floating left?

Question

I have two arrow nav items that I want to float left and right and they are positioned absolutely and have a higher z-index than everything on the page. But I'm having an issue.

<div id="slider-nav">
<a href="#" id="next"></a>
<a href="#" id="prev"></a>
</div>

Then I have the CSS where I want the two items to float left or right.

#next {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    float: right;
}

#prev {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    float: left;
}

#slider-nav {
    width: 100%;
    height: 12px;
    position: absolute;
    z-index: 100;
}

What happens is that the block that SHOULD float right ends up floating left on top of the left floating block. I tried adding the clear fix after the floating elements and inside the container div to no avail.

Answer 1

Elements can only be floated if they are in the flow . Absolutely positioned elements are not in the flow, thus cannot be floated. Try using left & right positioning instead.

#next {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    right: 0;
}

#prev {
    display: block;
    width: 8px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    left: 0;
}

Answer 2

I would set it with left:0px an right:0px css parameters

And put a decent width like 80px http://jsfiddle.net/Hfc5r/3/

#next {
    display: block;
    width: 80px;
    height: 12px;
    background-image:url(images/next.png);
    z-index: 999;
    position: absolute;
    right: 0px;
}
#prev {
    display: block;
    width: 80px;
    height: 12px;
    background-image:url(images/prev.png);
    z-index: 999;
    position: absolute;
    left: 0px;
}
#slider-nav {
    width: 100%;
    height: 12px;
    position: absolute;
    z-index: 100;
}

Answer 3

You can fix this a couple ways by positioning or by left / right attributes. in your CSS code, modify the position to be relative instead of absolute. This should solve your issue. I also changed the display of next to inline-block.

#next {
        display:inline-block;
        width: 8px;
        height: 12px;
        background-image:url(images/next.png);
        z-index: 999;
        position: relative;
        float: right;
    }
    #prev {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/prev.png);
        z-index: 999;
        position: relative;
        float: left;
    }
               #slider-nav {
                border:1px solid red;
                    height: 12px;
                    width:100%;
                    position: absolute;
                    z-index: 100;
                }

Answer 4

You don't need to float the elements once you have them positioned absolute:

  #next {
            display: block;
            width: 8px;
            height: 12px;
            background-image:url(images/next.png);
            z-index: 999;
            position: absolute;
            right: 0;
        }
        #prev {
            display: block;
            width: 8px;
            height: 12px;
            background-image:url(images/prev.png);
            z-index: 999;
            position: absolute;
            left: 0;
        }

Answer 5

use right:0; and left:0; for absolute positioned elements

Answer 6

you dont need position: absolute; in your #prev and #next, unless you want them to stack overtop of eachother.

Answer 7

I have tested your code and the issue is that position: absolute; is making it float over the whole document. You might consider using something like left: 10px , that will create something like margin-left: 10px . Use this code:

    #next {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/next.png);
        z-index: 999;
        position: absolute;
        float: right;
    }
    #prev {
        display: block;
        width: 8px;
        height: 12px;
        background-image:url(images/prev.png);
        z-index: 999;
        position: absolute;
        right: 30px;
        float: left;
    }
               #slider-nav {
                    width: 100%;
                    height: 12px;
                    position: absolute;
                    z-index: 100;
                }

If you want to float it to right, you can use this: right: 10px That will make it float at right side with only 10px margin.

Edit: My code is using right: 10px that means it will float at the right side.