View Full Version : Keep Element in View - Pure CSS

10-30-2008, 09:50 PM
Looking to see if anyone knows a way to keep an element visible halfway down a page as the user scrolls down without using javascript (thinking it's got to lie in the position:fixed property, but how to get the 50%...).

For example, a menu positioned on the right of the page, but halfway down - without knowing the exact height of the element.

If it turns out to be impossible without javascript, feel free to post your personal favorite (cleanest/smallest/no scroll lag) method.

I'll be doing the same thing after I hit post, so this is more of a challenge for the tightest code possible ;)

10-30-2008, 11:13 PM
#box {
top: 50%;
left: 50%;

This will put #box in the center of the screen all the time.

LMK if this is what you wanted.

10-30-2008, 11:39 PM
Ah yes, that's close but for two things:
1) Doesn't cut the cake for IE6 (though honestly for my purposes this doesn't matter too much)
2) More importantly, the 50% sets the top of the element at 50%, not the center of the element, which is why I was so focused on finding a non-JS method.

10-31-2008, 12:04 AM

10-31-2008, 12:39 AM
check out cssplay.co.uk
there is a position fixed layout that even IE6 likes.

10-31-2008, 12:52 AM
Will the element have an explicit height and width?

10-31-2008, 02:10 AM
without knowing the exact height of the element

If I knew the height it'd be a no brainer.

http://www.wpdfd.com/editorial/thebox/deadcentre4.html and http://www.milov.nl/code/css/verticalcenter.html don't work because you need a height.

http://d-graff.de/fricca/center.html doesn't work because I need it to be fixed.

10-31-2008, 02:14 AM
What is this being used for and why can't you use js?

10-31-2008, 07:03 AM
I can, just figured we had some top notch brains on this board and wanted to see if (assuming it's possible) we could figure out a way to manage it with CSS only.