Align DIV's to bottom or baseline
HtmlCssHtml Problem Overview
I'm trying to align a child div tag to the bottom or baseline of the parent div tag.
All I want to do is have the child Div at the baseline of the Parent Div, here is what it looks like now:
HTML
<div id="parentDiv">
<div class="childDiv"></div>
</div>
CSS
#parentDiv
{
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
}
Note
I will have multiple childDivs with varying heights, and I'll need them all to align to the baseline/bottom.
Html Solutions
Solution 1 - Html
You need to add this:
#parentDiv {
position: relative;
}
#parentDiv .childDiv {
position: absolute;
bottom: 0;
left: 0;
}
When declaring absolute element, it is positioned according to its nearest parent that is not static (it must be absolute, relative or fixed).
Solution 2 - Html
Seven years later searches for vertical alignment still bring up this question, so I'll post another solution we have available to us now: flexbox positioning. Just set display:flex; justify-content: flex-end; flex-direction: column on the parent div (demonstrated in this fiddle as well):
#parentDiv
{
display: flex;
justify-content: flex-end;
flex-direction: column;
width:300px;
height:300px;
background-color:#ccc;
background-repeat:repeat
}
Solution 3 - Html
Use the CSS display values of table and table-cell:
HTML
<html>
<body>
<div class="valign bottom">
<div>
<div>my bottom aligned div 1</div>
<div>my bottom aligned div 2</div>
<div>my bottom aligned div 3</div>
</div>
</div>
</body>
</html>
CSS
html,body {
width: 100%;
height: 100%;
}
.valign {
display: table;
width: 100%;
height: 100%;
}
.valign > div {
display: table-cell;
width: 100%;
height: 100%;
}
.valign.bottom > div {
vertical-align: bottom;
}
I've created a JSBin demo here: http://jsbin.com/INOnAkuF/2/edit
The demo also has an example how to vertically center align using the same technique.
Solution 4 - Html
this works (i only tested ie & ff):
<html>
<head>
<style type="text/css">
#parent {
height: 300px;
width: 300px;
background-color: #ccc;
border: 1px solid red;
position: relative;
}
#child {
height: 100px;
width: 30px;
background-color: #eee;
border: 1px solid green;
position: absolute;
bottom: 0;
left: 0;
}
</style>
</head>
<body>
<div id="parent">parent
<div id="child">child</div>
</div>
outside
</body>
</html>
hope that helps.
Solution 5 - Html
The answer posted by Y. Shoham (using absolute positioning) seems to be the simplest solution in most cases where the container is a fixed height, but if the parent DIV has to contain multiple DIVs and auto adjust it's height based on dynamic content, then there can be a problem. I needed to have two blocks of dynamic content; one aligned to the top of the container and one to the bottom and although I could get the container to adjust to the size of the top DIV, if the DIV aligned to the bottom was taller, it would not resize the container but would extend outside. The method outlined above by romiem using table style positioning, although a bit more complicated, is more robust in this respect and allowed alignment to the bottom and correct auto height of the container.
CSS
#container {
display: table;
height: auto;
}
#top {
display: table-cell;
width:50%;
height: 100%;
}
#bottom {
display: table-cell;
width:50%;
vertical-align: bottom;
height: 100%;
}
HTML
<div id=“container”>
<div id=“top”>Dynamic content aligned to top of #container</div>
<div id=“bottom”>Dynamic content aligned to botttom of #container</div>
</div>
I realise this is not a new answer but I wanted to comment on this approach as it lead me to find my solution but as a newbie I was not allowed to comment, only post.
Solution 6 - Html
You would probably would have to set the child div to have position: absolute.
Update your child style to
#parentDiv .childDiv
{
height:100px;
width:30px;
background-color:#999;
position:absolute;
top:207px;
}
Solution 7 - Html
An old post but thought i would share an answer for anyone looking.
And because when you use absolute things can go wrong.
What I would do is
HTML
<div id="parentDiv"></div>
<div class="childDiv"></div>
The Css
parentDiv{
}
childDiv{
height:40px;
margin-top:-20px;
}
And that would just sit that bottom div back up into the parent div. safe for most browsers too
Solution 8 - Html
I had something similar and got it to work by effectively adding some padding-top to the child.
I'm sure some of the other answers here would get to the solution, but I couldn't get them to easily work after a lot of time; I instead ended up with the padding-top solution which is elegant in its simplicity, but seems kind of hackish to me (not to mention the pixel value it sets would probably depend on the parent height).
Solution 9 - Html
You can also use vertical align
td {
height: 150px;
width: 150px;
text-align: center;
}
b {
border: 1px solid black;
}
.child-2 {
vertical-align: bottom;
}
.child-3 {
vertical-align: top;
}
<table border=1>
<tr>
<td class="child-1">
<b>child 1</b>
</td>
<td class="child-2">
<b>child 2</b>
</td>
<td class="child-3">
<b>child 3</b>
</td>
</tr>
</table>
Solution 10 - Html
<body>
<!-- CSS styles-->
<style>
.parent{
background-color:gray;
height:100vh;
display:flex;
flex-direction:column;
justify-content:space-between;
}
</style>
<!-- HTML -->
<div class="parent">
<div class="child1">
hello world! this is first child aligned at the top of parent div
</div>
<div class="child2">
hello world! this is first child aligned in the space between first and last child
</div>
<div class="child3">
hello world! this is last child aligned at the bottom of parent div
</div>
</div>
</body>
Solution 11 - Html
If you are having multiple child Div's inside your parent Div, then you can use vertical-align property something like below :
.Parent div
{
vertical-align : bottom;
}