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.
The answer is
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.
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).
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
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.
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).
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;
}
td {_x000D_
height: 150px;_x000D_
width: 150px;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
b {_x000D_
border: 1px solid black;_x000D_
}_x000D_
_x000D_
.child-2 {_x000D_
vertical-align: bottom;_x000D_
}_x000D_
_x000D_
.child-3 {_x000D_
vertical-align: top;_x000D_
}<table border=1>_x000D_
<tr>_x000D_
<td class="child-1">_x000D_
<b>child 1</b>_x000D_
</td>_x000D_
<td class="child-2">_x000D_
<b>child 2</b>_x000D_
</td>_x000D_
<td class="child-3">_x000D_
<b>child 3</b>_x000D_
</td>_x000D_
</tr>_x000D_
</table>This is my solution
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.
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;
}
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
}
Source: Stackoverflow.com