[css-d] Div that fixed vertically but floated right
CSS-d, I am trying to create a DIV that floats to the right of some content, but will stay fixed vertically even when the page is scrolled up or down. I found an example of what I mean here: http://www.mininova.org/ The advertisements on the right move up and down as you scroll, keeping them on the page. The method used on this page seems to be accomplished with iFrames, which, I have to admit, I know almost nothing about. I thought this could be accomplished with pure CSS, by having a position:fixed declaration in combination with float:right. However, it is not that easy. Turns out that position:fixed over rides everything so that the float right becomes moot. I tried absolutely positioning my DIV on the right, but there are drawbacks. I've set some min-width declarations on the content, but a position:fixed DIV ignores those and will overlap the content. The short story is that I'm trying to get a DIV to behave fixed vertically, and behave right floated horizontally. If this is not possible with pure CSS, I am willing to implement Javascript. Also, I am not concerned at all about IE6 compatibility. So solutions that depend on modern compliant browsers are fine. Naturally, I have tried looking this up on Google, but I can't seem to find exactly what I'm looking for. If I wanted to float the DIV on the left side, it would be a snap. Absolute positioning would be fine. And the Javascript options I've seen so far tend to solve slightly different problems, and I don't have enough JavaScript ability to modify them. Any suggestions would be greatly appreciated. -- Dave M G __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right
--- On Mon, 1/18/10, Dave M G mar...@autotelic.com wrote: I am trying to create a DIV that floats to the right of some content, but will stay fixed vertically even when the page is scrolled up or down. Just a quick idea for one possible approach: if the 'floated' div has a known width, you should be able to include it in a relatively positioned wrapper (your main content?), position it absolutely, and create enough right margin on the wrapper to accommodate it. Will that work for your specific case? - Bobby __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right
Bobby, Thanks for replying. ...you should be able to include it in a relatively positioned wrapper... position it absolutely, and create enough right margin on the wrapper to accommodate it. If I understand your suggestion, then what this results in is the DIV inside the wrapper does position itself correctly in horizontal terms relative to the width of the browser window. But it does not move up and down when the page is scrolled. One can't have position:fixed and position:absolute on the same DIV, so unfortunately this does not get the effect I am after. -- Dave M G __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right
On Monday 18 January 2010 06:26:00 Dave M G wrote: Bobby, Thanks for replying. ...you should be able to include it in a relatively positioned wrapper... position it absolutely, and create enough right margin on the wrapper to accommodate it. If I understand your suggestion, then what this results in is the DIV inside the wrapper does position itself correctly in horizontal terms relative to the width of the browser window. But it does not move up and down when the page is scrolled. One can't have position:fixed and position:absolute on the same DIV, so unfortunately this does not get the effect I am after. I'm not all that sure this will work, but here's my idea: Set the height of the wrapper to auto so when the div inside the wrapper scrolls the wrapper will automatically grow in height. -- Blessings David M. I have been driven to my knees many times by the overwhelming conviction that I had nowhere else to go. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right
Dave M G wrote: I am trying to create a DIV that floats to the right of some content, but will stay fixed vertically even when the page is scrolled up or down. Is it the behavior of the right float on this page you want... http://www.gunlaug.no/main-en.html ...? If so, that's a 'right-float' pushed to where I wanted it by margins from inside a 'fixed positioned' container at the top of the window. Regular HTML and CSS for good browsers, and an added expression for IE6 and older. This OTOH... http://www.mininova.org/ ...is Javascript at play. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right
One can't have position:fixed and position:absolute on the same DIV, so unfortunately this does not get the effect I am after. Have you tried using position properties with the div that is fixed? I believe that is what I have done in the past. A quick search showed that the fixed position property is absolutely positioned. So set the div to fixed and then use the same position properties that you would if it were absolute (top, bottom, left, right). __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Div that fixed vertically but floated right [SOLVED]
Troy, David, Bobby, Georg, Thank you all for responding. I started out trying to emulate Georg's solution, and I think I ended up doing things a little different. You can see the result here: http://autotelic.com/avatar_-_the_metacontextual_edition Please let me know if it's doing something unexpectedly crazy. As far as I can tell, the Google ads on the side slides down as one scrolls down. It keeps an 80 pixel buffer from the top of the viewport, which isn't quite perfect, but I don't think I can change that behaviour without Javascript. I might look into that later, but for now other work beckons. So I'm calling this solved for now, since the premise of my original question has been answered sufficiently that I understand the issues involved. Thanks to everyone who offered suggestions. -- Dave M G __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Keeping the footer at the bottom
Im trying to do something that I know is done every day but for the life of me, I cant figure it out. |___Top Div| | Middle Div__| |---|--| |..left.|..right...| | | | |--| |...footer.| Simple layout. Top div has the header, etc. Middle div has a left and right div in it. Bottom div has the footer. I want the bottom div to be at the bottom with the text across the bottom regardless of whether the left div(nav) is as long as the right div(content). What it does right now is, the footer text ended up pushed to the left, under the left div when the right content is too long. I dont have a page up yet... just playing around with an idea for a design for someone, but, how do you get that footer to stay at the bottom regardless? Wade -- Registered Linux User: #480675 Registered Linux Machine: #408606 Linux since June 2005 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Keeping the footer at the bottom
18/1/2010 11:38 ??, O/H Wade Smart ??: Im trying to do something that I know is done every day but for the life of me, I cant figure it out. |___Top Div| | Middle Div__| |---|--| |..left.|..right...| | | | |--| |...footer.| Simple layout. Top div has the header, etc. Middle div has a left and right div in it. Bottom div has the footer. I want the bottom div to be at the bottom with the text across the bottom regardless of whether the left div(nav) is as long as the right div(content). What it does right now is, the footer text ended up pushed to the left, under the left div when the right content is too long. I dont have a page up yet... just playing around with an idea for a design for someone, but, how do you get that footer to stay at the bottom regardless? Wade I guess if you try to clear the the middle div which contains the left and right div then the footer div will stay at the bottom in it's own newly created line. So, use clear:both; for the middle div. Sotiris. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Keeping the footer at the bottom
Wade Smart wrote: Im trying to do something that I know is done every day but for the life of me, I cant figure it out. |___Top Div| | Middle Div__| |---|--| |..left.|..right...| | | | |--| |...footer.| Wade Dunno without seeing the current css/markup. But, try overflow: hidden; in the css for middle division and add to the footer division css width: ...whatever the width of the page is.. ; and clear:both; Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
