Align Div at bottom on main Div

35

I have two divs, one inside the other and I would like the small div to be aligned at the buttom of the main div.

Here's my code so far. Currently, the button is at the top of main div, instead I want it positioned at the bottom. Any help would be appreciated.

.vertical_banner {
    border: 1px solid #E9E3DD;
    float: left;
    height: 210px;
    margin: 2px;
    padding: 4px 2px 10px 10px;
    text-align: left;
    width: 117px;
}

#bottom_link{
 vertical-align: bottom;
}

Here's how I've been trying to use it, but as you can see I'm still new to CSS :)

<div class="vertical_banner">
    <div id="bottom_link">
         <input type="submit" value="Continue">
       </div>
</div>

This question is tagged with html css

~ Asked on 2011-09-04 19:47:13

The Best Answer is


60

Modify your CSS like this:

_x000D_
_x000D_
.vertical_banner {_x000D_
    border: 1px solid #E9E3DD;_x000D_
    float: left;_x000D_
    height: 210px;_x000D_
    margin: 2px;_x000D_
    padding: 4px 2px 10px 10px;_x000D_
    text-align: left;_x000D_
    width: 117px;_x000D_
    position:relative;_x000D_
}_x000D_
_x000D_
#bottom_link{_x000D_
   position:absolute;                  /* added */_x000D_
   bottom:0;                           /* added */_x000D_
   left:0;                           /* added */_x000D_
}
_x000D_
<div class="vertical_banner">_x000D_
    <div id="bottom_link">_x000D_
         <input type="submit" value="Continue">_x000D_
       </div>_x000D_
</div>
_x000D_
_x000D_
_x000D_

~ Answered on 2011-09-04 19:51:30


9

Give your parent div position: relative, then give your child div position: absolute, this will absolute position the div inside of its parent, then you can give the child bottom: 0px;

See example here:

http://jsfiddle.net/PGMqs/1/

~ Answered on 2011-09-04 19:53:59


Most Viewed Questions: