CSS Bottom Right Corner DIV
   
All you need is some CSS to create a div that sits on the bottom-right of the
screen. You may also want to check out my other articles on div positioning:
bottom left corner (URL: css-bottom-left-corner-div.html), top right corner
(URL: css-top-right-corner-div.html), center screen (URL:
css-center-screen-div.html), and full screen (URL: css-full-screen-div.html).
You can click the following link to preview this CSS in action:
   
Click here to preview bottom-right corner div (URL:
position-div-bottom-right-corner.html)
   
The CSS
   
Put this code inside the head tag:

<style type="text/css">
  /*this is what we want the div to look like*/
  div.botright{
    display:block;

    /*set the div in the bottom right corner*/
    position:absolute;
    bottom:0;
    right:0;
    width:350px;
    
    /*give it some background and border*/
    background:#eee;
    border:1px solid #ddd;
  }

</style>

   
This CSS sets the div at the bottom-right corner.
   
Now, just grab the XHTML (URL: #html) for the actual div.
   
The HTML
   
Place this code inside the body tag:

<div class="botright">
  <p>Here is my div content!!</p>

</div>

   
CSS Walkthrough
   
Here is a quick walkthrough of this simple CSS:

position:absolute;
 

   
This line says that the div should not be affected by the elements around it. We
should be able to tell the div exactly where to be.

bottom:0;
right:0;

   
This section is what positions the div on the bottom-right. bottom:0 says that
the bottom of the div should be zero pixels from the bottom of the window.
Likewise, right:0 says that the right side of the div should be zero pixels from
the right side of the window.
   
More Questions?
   
As always, if you have any more questions, please email me (URL: contact.html).
I am always glad to answer questions and work on custom scripts.