DIV align bottom right (or left!)

Find out how to align a DIV to the bottom left or right.

This was always one of those problems that I had with CSS – getting the content to align to the bottom of it’s containing DIV, be it left or right align. So here’s how to do it.

The key is to use to the “position” property. Give your containing DIV a relative position and the content an absolute position.

I find these things easier if you can just take an example page and play with it in your own time so download this single HTML page and play away.

For those that like the code here it is:

CSS

#container
{
width: 300px;
height: 200px;
border: solid 1px #000;
position: relative;
}

#bottom-right
{
right: 0;
bottom: 0;
position: absolute;
}

#bottom-left
{
left: 0;
bottom: 0;
position: absolute;
}

HTML

<div id="container">
<div id="bottom-right">
bottom right
</div>
<div id="bottom-left">
bottom left
</div>
</div>

7 replies on “DIV align bottom right (or left!)

  1. Avatar for frfffffffrfrrrrfrfrfr frfffffffrfrrrrfrfrfr says:

    Show this for html please.

  2. Avatar for Osei Kwadjoe Osei Kwadjoe says:

    ive been try this in divi theme wordpress and it keeps overlapping
    Could you please help

  3. Avatar for Osei Kwadjoe Osei Kwadjoe says:

    is this going to work on images

    1. Avatar for daretothink daretothink says:

      Yep

  4. Avatar for Camilo Caro Camilo Caro says:

    thanks from Uruguay!!!!!!! 😀 😀 😀

  5. Avatar for maverick09 maverick09 says:

    Superb, exactly what I was looking for..

  6. Avatar for asdasdasd asdasdasd says:

    TTTTTTHHHHHHHHAAAANNNNNNKKKKKKKKK YYYYYYYOOOOOOUUUUUUUUUU!!!!!!!!!!!!!!!!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *