120

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.

2
  • wasnt even thinking! i just removed the height on the parentDiv and all the childDiv now sit on the basline. im just a silly sally!
    – sia
    Commented Jan 6, 2010 at 17:59
  • But if you want it to have some specific height - you should use absolute positioning according to the parent. Commented Jan 6, 2010 at 18:01

11 Answers 11

189

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).

2
  • 9
    I doubt this does what he wants, currently this will position all (looks as though there will be multiple child elements if its a dynamic bar chart) on top of each other.
    – crmepham
    Commented Dec 14, 2013 at 6:55
  • Plus 1,More explanation would be useful ...@anyone !!
    – Tejas
    Commented May 11, 2022 at 7:54
82

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
}
4
  • 1
    Simple. Exactly what I wanted. Use align-items: flex-start; if you dont want to strech the items.
    – Madhan
    Commented Sep 9, 2017 at 18:25
  • This is the best answer these days! Commented Jun 23, 2020 at 17:05
  • justify-content: flex-end disappears my scroll bar
    – kta
    Commented Sep 22, 2020 at 11:26
  • 13
    This only works if you want ALL child elements to be bottom-justified.
    – clayRay
    Commented Mar 10, 2021 at 3:56
13

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.

3
  • 1
    For as much shit as tables get, sometimes this is the best solution
    – Sean256
    Commented Nov 3, 2016 at 20:14
  • this was the best solution for me
    – bowlerae
    Commented Aug 15, 2017 at 2:42
  • This really is the best solution, since using absolutely positioned elements typically changes the height of the parent element
    – hamncheez
    Commented Aug 24, 2017 at 16:32
7

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.

6

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>

Example

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.

3

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;
}
2
  • i tried that, but what i need is the bottom of the childDiv to sit at the bottom of the parentDiv, the graph is to be dynamic, and the heights will vary from each childDiv to the next...positioning might work but i havent quit figured out something that is solid...
    – sia
    Commented Jan 6, 2010 at 17:57
  • 5
    not a good idea to set top to 207 (some arbitrary number) better to set bottom:0
    – pstanton
    Commented Jan 6, 2010 at 18:06
1

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

1
  • This would make the childDiv half at the bottom of the parentDiv. You need to atleast use -40px on the margin-top. Also its the best practice to use position:relative; in this cases for both divs.
    – Augus
    Commented May 30, 2013 at 13:39
1

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).

1

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>

1
  • Why are you using a table when the question specifically mentioned DIV? Commented Sep 8, 2021 at 21:29
1

<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>


-5

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;
}
1
  • Why so many down votes for this without comments? Does it not solve the problem? Research online suggest it should.
    – sholsapp
    Commented Feb 10, 2014 at 21:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.