I am messing around with the 'fixed' positioning with a floated div.

Feel free to see what I have so far right here

The issue comes about when you scroll down to the bottom of the site.

I'd like the image to be fixed within the content box

I've tried...

  • adding padding/margin to the bottom of the fixed div
  • adding position: relative in the containing div
  • adding additional height to the fixed div

Is there a way to achieve this effect through CSS w/o a hack?

2 answers

Doug 1095
This was chosen as the best answer

Fixed positioning positions the element relative to the viewport (browser window), rather than any other element on the page, so the problem you're seeing is pretty much unavoidable with the method you're using.

One workaround would be to limit the footer to the width of the main content, so the image doesn't overlap it.

A better solution might be to use JavaScript to keep the image at the top of the page when scrolling, like this example. I like this better because on a smaller resolution screen (like a netbook), the image won't be visible at all and the user cannot scroll down to see something with fixed positioning. You might be excluding some users because of this.

Answered over 9 years ago by Doug
  • yea. i was afraid I needed to use js. Derek Adair over 9 years ago
Jordan 469

One of the best things about CSS is that you can position an object absolutely anywhere you want in the document. It's also possible (and often desirable) to position objects within a container. It's simple to do too. Make sure that you have position:relative; assigned to the container, and then position:absolute; assigned to the image. Then you can also set the margin and padding as you wish.

Answered over 9 years ago by Jordan