Align DIV's to bottom or baseline

html css

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.

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!

But if you want it to have some specific height - you should use absolute positioning according to the parent.

calvinf

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

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.

Plus 1,More explanation would be useful ...@anyone !!

gcbenison

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
}

Simple. Exactly what I wanted. Use align-items: flex-start; if you dont want to strech the items.

This is the best answer these days!

justify-content: flex-end disappears my scroll bar

This only works if you want ALL child elements to be bottom-justified.

Sean256

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.

For as much shit as tables get, sometimes this is the best solution

this was the best solution for me

This really is the best solution, since using absolutely positioned elements typically changes the height of the parent element

Will Richardson

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.

Nick Gillard

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>

https://i.stack.imgur.com/ypMfh.jpg

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.

Yi Jiang

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

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

not a good idea to set top to 207 (some arbitrary number) better to set bottom:0

佚

佚名

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

cellepo

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

kenan238

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

child 1

child 2

child 3

Why are you using a table when the question specifically mentioned DIV?

NAUMAN QAMAR Mujtaba


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

Pawan

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

Why so many down votes for this without comments? Does it not solve the problem? Research online suggest it should.

Align DIV's to bottom or baseline

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US