Skip to navigation

CSS Top Right Corner DIV

All you need is some CSS to create a div that sits on the top-right of the screen. You may also want to check out my other articles on div positioning: bottom left corner, bottom right corner, center screen, and full screen. You can click the following link to preview this CSS in action:

Click here to preview top-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.topright{
    display:block;

    /*set the div in the top right corner*/
    position:absolute;
    top: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 top-right corner.

Now, just grab the XHTML for the actual div.

The HTML

Place this code inside the body tag:

<div class="topright">
  <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.

top:0;
right:0;

This section is what positions the div on the top-right. top:0 says that the top of the div should be zero pixels from the top 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.