Morgan Posted January 7, 2009 Share Posted January 7, 2009 Hi there,Ok so here is the functionality I want to accomplish, and it is probably relatively easy, I just can't seem to find the right information:I have a BIO page I am working on, with a <div> floating to the left displaying all the pictures of the people, and a <div> floating to the right with the BIO's for those people.I am using a Collapsible DIV Javascript so that when you click an image on the left side of the page, it displays a div WITHIN the right floating DIV, which displays all the BIO info for that specific person. When you click another image, the original DIV goes back to being hidden, and the new DIV for the new BIO is displayed in its place. My problem is, there are many BIO images on the left, and as such, if you scroll down too far on the page, you have lost the BIO (it is still at the top of the page).I want to make it so that the <div> that is floating right (the one that hosts all the many hidden BIO divs), will scroll the page with you, so that it is always visible on the right side of the page (rather than being absolutely at the top at all times)is this possible? I believe it is, as I have seen it done with images in my time, but I can't seem to find the right functions to accomplish it.I hope I was clear enough, please let me know if I wasn't, and thanks to anyone who can help me out Cheers- Morgan Link to comment Share on other sites More sharing options...
roundcorners Posted January 8, 2009 Share Posted January 8, 2009 Hi there,Ok so here is the functionality I want to accomplish, and it is probably relatively easy, I just can't seem to find the right information:I have a BIO page I am working on, with a <div> floating to the left displaying all the pictures of the people, and a <div> floating to the right with the BIO's for those people.I am using a Collapsible DIV Javascript so that when you click an image on the left side of the page, it displays a div WITHIN the right floating DIV, which displays all the BIO info for that specific person. When you click another image, the original DIV goes back to being hidden, and the new DIV for the new BIO is displayed in its place. My problem is, there are many BIO images on the left, and as such, if you scroll down too far on the page, you have lost the BIO (it is still at the top of the page).I want to make it so that the <div> that is floating right (the one that hosts all the many hidden BIO divs), will scroll the page with you, so that it is always visible on the right side of the page (rather than being absolutely at the top at all times)is this possible? I believe it is, as I have seen it done with images in my time, but I can't seem to find the right functions to accomplish it.I hope I was clear enough, please let me know if I wasn't, and thanks to anyone who can help me out Cheers- Morganyou can use position:fixed so the right hand side box scrolls down the page, in effect it is always positioned relative to the browser window. Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 8, 2009 Share Posted January 8, 2009 you can use position:fixed so the right hand side box scrolls down the page, in effect it is always positioned relative to the browser window.Fixed won't work with IE6, however. I did see a way once, if I find it gain I'll post it. Link to comment Share on other sites More sharing options...
jlhaslip Posted January 8, 2009 Share Posted January 8, 2009 http://www.cssplay.co.uk/layouts/fixed.html Link to comment Share on other sites More sharing options...
Jerry62704 Posted January 8, 2009 Share Posted January 8, 2009 http://www.cssplay.co.uk/layouts/fixed.htmlThank you. I knew I had read that, but I couldn't remember the site. I've got way too many bookmarks and it's time to reorganize them. Link to comment Share on other sites More sharing options...
Morgan Posted January 8, 2009 Author Share Posted January 8, 2009 Hi all, thanks for your replies :)I have another query however:I am using the following to push the div I want to follow the page over to the right:div.bioright {float: right}when I add this:div#bioright {position: fixed}* html #bioright {position: absolute}and add an ID next to the CLASS on the Right Side <div>, it does as intended, however it forces everything over to the left - seemingly bypassing the fact that I have it set to float: right (thereby, overlapping all my images on the left side).I tried simply adding position: fixed to the end of the class rather than creating a new ID, but that gave the same resultHow can I get it to follow the page (like fixed would do) but remain floated to the right side of the page itself?Thanks!Edit: Figured out a way around this, I just wrapped all the divs that I wanted to stay on the right side of the page (but move with the page) within another div, and floated the main div wrapper to the right. I am still curious if there is another easier (or more correct) way to do this than what I have done, so please post your knowledge Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.