CSS - Placement of a div in the lower left-hand corner

Question

I wish I were a CSS smarty ....

How can you place a div container in the lower left-hand corner of the web page; taking into account the users scroll-position?

Thanks in advance for any assistance.

Answer 1

To keep the users scroll position you may need to use javascript for this.

Answer 2

The attributes...

position: fixed;
left: 0;
bottom: 0;

...should do the job in every browser except IE. If supporting IE users is important for your site, you need to add some ugly Javascript.

Answer 3

I think you could use the same code as the footer, but change the width of the div to fixed or not 100%. I'm not sure what you mean by the users scroll-position.

So essentially, you will do:

#lowerleft {

  position:fixed;
  bottom:0;
  left:0;
  width:<fixed px>;
  height:<fixed px>;
}

reference for fixed footer is here.

Answer 4

Fixed positioning gets the job done outside of IE. What are you using this fixed div for?

Answer 5

This works Just fine in IE7 and FF. It puts the div in the bottom left hand corner and stays there as you scroll. If this isn't the solution can you please elaborate?

.bottom { position:fixed; bottom:0%; left:0% }

Answer 6

sorry guys i can't vote up since my reputation is below 15..i just registered...