CODEWITHSUNDEEP
htmlcss
Helen Neely
Helen Neely

Reputation: 4740

Align Div at bottom on main Div

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>

Upvotes: 37

Views: 163731

Answers (6)

beeeliu
beeeliu

Reputation: 109

Another way to do it is to add a margin-top: auto and margin-bottom: 0. This tells the margin top to fill in the missing space.

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382696

Modify your CSS like this:

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

#bottom_link{
   position:absolute;                  /* added */
   bottom:0;                           /* added */
   left:0;                           /* added */
}
<div class="vertical_banner">
    <div id="bottom_link">
         <input type="submit" value="Continue">
       </div>
</div>

Upvotes: 65

Humberto Rodrigues
Humberto Rodrigues

Reputation: 179

Please try this:

#b {
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: inline-flex;

-webkit-flex-flow: row nowrap;
-moz-flex-flow: row nowrap;
flex-flow: row nowrap;

-webkit-align-items: flex-end;
-moz-align-items: flex-end;
align-items: flex-end;}

Here's a JSFiddle demo: http://jsfiddle.net/rudiedirkx/7FGKN/.

Upvotes: 1

mynameiscoffey
mynameiscoffey

Reputation: 15982

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/

Upvotes: 11

Jake
Jake

Reputation: 4234

This isn't really possible in HTML unless you use absolute positioning or javascript. So one solution would be to give this CSS to #bottom_link:

#bottom_link {
    position:absolute;
    bottom:0;
}

Otherwise you'd have to use some javascript. Here's a jQuery block that should do the trick, depending on the simplicity of the page.

$('#bottom_link').css({
    position: 'relative',
    top: $(this).parent().height() - $(this).height()
});

Upvotes: 5

Simon Arnold
Simon Arnold

Reputation: 16177

I guess you'll need absolute position

.vertical_banner {position:relative;}
#bottom_link{position:absolute; bottom:0;}

Upvotes: 3

Related Questions