CSS image at bottom in div -> problem when use with scrollbar

[Muiter]

I have an image that is shown in different div's:When the div has an scrollbar, the div is fixed at one point:Any suggestions to make the image scroll down when the user scrolls?CSS:

.footer_popup {float: right; width: 25px; position: absolute; right: 0; bottom: 0;}

[thescientist]

I wouldn't use positioning then. I would try and find an appropriate combination of margins and paddings using relative units (like %) to position it in the bottom right hand corner of the div.

[ShadowMage]

I wouldn't use positioning then. I would try and find an appropriate combination of margins and paddings using relative units (like %) to position it in the bottom right hand corner of the div.

I don't think there is any combination of those properties that will make it always in the bottom right corner. If it isn't taken out of the flow, it will scroll out of view when the div is scrolled up.I think the solution here is to wrap the scrolling div in a container with position: relative; and remove position: relative; from the scrolling div. Something like:

<div id='wrap'>   <div id='scrolling_div'>	  ....stuff.....	  <img id='footer_popup' src='image.jpg' alt='img' />   </div></div>

#wrap {   position: relative;}#scrolling_div {   /* If you have position: relative; here, remove it */}#footer_popup {   /* These styles will remain unchanged */}

[thescientist]

i see now, the image scrolls with. I though it was a matter of making sure it's always in the corner.

[Muiter]

I think the solution here is to wrap the scrolling div in a container with position: relative; and remove position: relative; from the scrolling div. Something like:

Fantastic!(now the image is shown at the bottom of every popup, so when the user has not scrolled down the image is not visseble. Is there any wat to make it float at the bottom right so it stays there when the user scrolls?)

[ckrudelux]

Fantastic!(now the image is shown at the bottom of every popup, so when the user has not scrolled down the image is not visseble. Is there any wat to make it float at the bottom right so it stays there when the user scrolls?)

I would put the image as a background of #warp or #scrolling_div

#warp {background: url('image.jpg') no-repeat right bottom;}#scrolling_div {background: url('image.jpg') no-repeat right bottom fixed;}

[ShadowMage]

(now the image is shown at the bottom of every popup, so when the user has not scrolled down the image is not visseble. Is there any wat to make it float at the bottom right so it stays there when the user scrolls?)

Can you post your code? HTML and CSS? With the method I suggested, the image should always appear in the bottom right, no matter the position of the scrollbar.ckrudelux has a good point. Something I overlooked... :)If you don't already have a background image on the scrolling div, it may be easiest to put the image as the background of that div with fixed position, like ckrudelux showed you above.

[Muiter]

I would put the image as a background of #warp or #scrolling_div

No luck.This is the situation.I'm using this popup script.The content of the popup is loaded with:

<div id="popup_add_bestelling" class="popup_block"><iframe id="ifr" frameborder="0" scrolling="no" width="1000" height="470"></iframe></div>

The CSS of popup_block is (when I add the code you suggested in here it puts the image in my borders)

.popup_block{	display: none; /*--hidden by default--*/	background: #f4f4f4;	padding: 10px;	border: 2px solid #0065a5;	float: left;	font-family: Arial;	font-size: 12px;	position: fixed;	top: 50%; left: 50%;	z-index: 99999;	/*--CSS3 Box Shadows--*/	-webkit-box-shadow: 0px 0px 20px #000;	-moz-box-shadow: 0px 0px 20px #000;	box-shadow: 0px 0px 20px #000;	/*--CSS3 Rounded Corners--*/	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}

[ckrudelux]

No luck.This is the situation.I'm using this popup script.The content of the popup is loaded with:

<div id="popup_add_bestelling" class="popup_block"><iframe id="ifr" frameborder="0" scrolling="no" width="1000" height="470"></iframe></div>

The CSS of popup_block is (when I add the code you suggested in here it puts the image in my borders)

.popup_block{	display: none; /*--hidden by default--*/	background: #f4f4f4;	padding: 10px;	border: 2px solid #0065a5;	float: left;	font-family: Arial;	font-size: 12px;	position: fixed;	top: 50%; left: 50%;	z-index: 99999;	/*--CSS3 Box Shadows--*/	-webkit-box-shadow: 0px 0px 20px #000;	-moz-box-shadow: 0px 0px 20px #000;	box-shadow: 0px 0px 20px #000;	/*--CSS3 Rounded Corners--*/	-webkit-border-radius: 10px;	-moz-border-radius: 10px;	border-radius: 10px;}

Background is applied on the padding area as well if you have fixed width you can set width position in pixels instead of a floating direction.

[Muiter]

Background is applied on the padding area as well if you have fixed width you can set width position in pixels instead of a floating direction.

I'm trying to change CSS as you suggested but it only changes but it only changes the border and won't add the image.

[ckrudelux]

I'm trying to change CSS as you suggested but it only changes but it only changes the border and won't add the image.

I suggest you test whats happen with small numbers so you will see where it goes not total sure if order matters if then using floats so then you set your px it could be in the wrong order.or put an extra div but without the padding inside.. if you get my point.

[Muiter]

or put an extra div but without the padding inside.. if you get my point.

Sorry I don't

[ShadowMage]

I think I know why my code didn't work quite the way I expected it to. Your HTML isn't set up the way I imagined it to be. This is why it's helpful to post HTML in context (ie, with a little bit of important surrounding code, such as ancestors or siblings that may be affecting layout).Anyway, let's try the background suggestion.I think if you replace this:background: #f4f4f4;with:background: #f4f4f4 url('image.jpg') no-repeat right bottom fixed;it should work.