Search code examples
imageinheritancescrollpositionfixed

Images scrolling with page

I need help with a CSS property I can't understand.

I have two images supposed to scroll down the window but only one does it.

Left one works fine, but the right one (Facebook logo) does not move.

URL is : http://www.antoinewistaff.com

I have the part of CSS here :

#clients    {float:left; position:fixed; top:0; padding:0px 0px 0px 50px;}
#facebook   {float:right; position:inherit; top:0; padding:0px 50px 0px 0px;}

YES I had to put position:inherit; for the #facebook line because otherwise it goes right over the other one (left side instead of right side) maybe I missed something there?

I TRIED BOTH with position:fixed; and it just put both on left side (scrolling, but not on their side)

I hope it's clear, and someone can help me :)

Thank you!

Solution

  • You have to use right to place it on the right side. And floats will not affect any element with position:fixed or position:absolute

    #facebook {
    position:fixed;
    right:0;
}

    Valid properties that elements with absolute or fixed positioning can use to position themselves are the following:

    • top
    • left
    • botttom
    • right
    • margins (negative and positive for each direction)

    Also note that one cannot apply both a top & bottom or left & right, the one that is placed after the other will be used