Search code examples
cssbuttonalignment

Align button at the bottom of div using CSS

I want to align my button at the bottom right corner of my div. How can I do that?

enter image description here

Current css of div:

    float: right;
    width: 83%;
    margin-right: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    height:625px;
    overflow:auto;
Solution

  • You can use position:absolute; to absolutely position an element within a parent div. When using position:absolute; the element will be positioned absolutely from the first positioned parent div, if it can't find one it will position absolutely from the window so you will need to make sure the content div is positioned.

    To make the content div positioned, all position values that aren't static will work, but relative is the easiest since it doesn't change the divs positioning by itself.

    So add position:relative; to the content div, remove the float from the button and add the following css to the button:

    position: absolute;
right:    0;
bottom:   0;