Skip to navigation

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, top right corner, center screen, and full screen. You can click the following link to preview this CSS in action:

Click here to preview bottom-right corner div

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 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. I am always glad to answer questions and work on custom scripts.