Skip to content

CSS Bottom Left Corner Div

This div will sit in the very bottom-left corner of the screen.

[Bottom-Left Div] Options

Credits

By Andrew Peace.

Bottom-left div

All you need is some CSS to create a div that sits on the bottom-left of the screen. You may also want to check out my other articles on div positioning: bottom right, 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-left 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.botleft{
    display:block;

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

This CSS sets the div at the bottom-left corner.

Now, just grab the XHTML for the actual div.

The HTML

Place this code inside the body tag:

<div class="botleft">
  <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;
left:0;

This section is what positions the div on the bottom-left. bottom:0 says that the bottom of the div should be zero pixels from the bottom of the window. Likewise, left:0 says that the left side of the div should be zero pixels from the left 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.