Align content to bottom of div with CSS

Question

I have a specific segment of HTML that I am trying to align to the bottom of it's parent. The parent's height however, is unknown. Absolute positioning will not work since the height is unknown (believe me, I've tried the widely documented relative position with absolute child elements and bottom: 0). The content in question is within a sidebar as illustrated below:

------------------
|  stuff     |con|
|  stuff     |ten|
|  stuff     |   |
|            |   |
|            |bot| <--- This is what I want to align to the bottom
------------------

Any clever solutions to this perhaps?

EDIT:

Absolute position will not work in this scenario. The content that needs to be aligned to the bottom can potentially be larger than the content inside the left column, which will effectively create this:

------------------
|  stuff     |con|
|  stuff     |ten|
|  stuff     |   |
|            |   |
|            |bot|
-------------|bot|
             |bot|
             |bot| <--- Unintended trailing...

[Align an element to bottom with flexbox](http://stackoverflow.com/q/31000885/1529630) — Oriol, May 16 '16 at 03:38
@timolawl, unfortunately absolute will not work here since the height is unspecified. — Drakken Saer, May 16 '16 at 03:40
You can use grid, table, bootstrap, floats... What have you done so far? — Rusty, May 16 '16 at 03:42
@timolawl without parent height it doesn't work. Possibly, `position:fixed; bottom:0`. This removes the element from parent if it is important and position it relative to the window. I don't think this is correct approach. The solution is about calculating and setting explicitly parent height. — Alex Kudryashev, May 16 '16 at 03:43
@Rusty I have tried flexbox, absolute positioning as timolawl mentioned (which worked with a specified height, but that won't work in the way the project needs to). Bootstrap is currently being used in the column format you see. — Drakken Saer, May 16 '16 at 03:45
what you want to happen is when the content of your left div was too long you want to fill the missing space for the sidebar right? You can you use js for that when the user scroll and no more content in the sidebar the last sidebar will stuck to it's position. — winresh24, May 16 '16 at 03:46
@winresh24 you are right, JS would resolve this issue. I'd like to avoid it if possible though, not all of our users will have JS enabled (shocking, I know). — Drakken Saer, May 16 '16 at 03:48

score 3 · Answer 1 · edited May 16 '16 at 04:17

3

Set div container (parent div): position:relative;

and then set button CSS:

position:absolute;
right:0;
bottom:0;

edited May 16 '16 at 04:17

Jude Niroshan

4,280
8
40
62

answered May 16 '16 at 03:38

Quốc Hồ Thanh

35
1

Only if the other column is taller – Oriol May 16 '16 at 03:39
Unfortunately since the height is unspecified, absolute positioning won't work in my case. – Drakken Saer May 16 '16 at 03:40
it's work if you setting parent div with position property is relative – Quốc Hồ Thanh May 16 '16 at 03:43
That's what I had tried. Because the height is unknown, as Oriol said, the absolute positioning can extend beyond it's desired area. Both heights for each column are unknown, so one can supersede the other – Drakken Saer May 16 '16 at 03:47
you can refer to below code: Demo
Demo

– Quốc Hồ Thanh May 16 '16 at 03:56

score 1 · Answer 2 · answered May 16 '16 at 06:13

1

You could use display: table in your parent element, then set on the child you are trying to align bottom the property display: table-cell and vertical-align: bottom.

answered May 16 '16 at 06:13

Ricky Ruiz

25,455
6
44
53

This solution does work, but I need to support mobile devices, which will use bootstrap's collapsing grid system. Unfortunately table-cells, to my knowledge, cannot do this. +1 for an effective answer though. My bad for not saying that I need it to be responsive. – Drakken Saer May 16 '16 at 18:37

Paulie_D · Accepted Answer · 2016-05-16T19:24:37.333

Flexbox can do that.

Firstly we apply display:flex to the overall parent "row". This equalises the heights of the two columns.

Then we also apply display:flex to the sidebar but use flex-direction:column.

Finally, as mentioned by Oriol in the comments, we apply margin-top:auto to our element to be at the bottom of the sidebar so that it pushes itself all the way to the bottom regardless of the content of that sidebar.

* {
  box-sizing: border-box;
}
.parent {
  border: 1px solid red;
  margin-bottom: 1em;
  display: flex;
}
main {
  background: lightgreen;
  flex: 0 0 75%;
}
aside {
  flex: 0 0 25%;
  padding: .5em;
  display: flex;
  flex-direction: column;
  background: #c0ffee
}
.bottom {
  height: 15px;
  background: pink;
  margin-top: auto;
}

<div class="parent">
  <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, delectus explicabo facere veritatis culpa soluta laborum expedita, aliquam consequuntur quos eos molestias similique, impedit consectetur veniam quasi! Adipisci, voluptas qui dolore
    explicabo voluptatem nobis aspernatur eligendi sapiente modi consequuntur asperiores laboriosam voluptate reprehenderit id, odit repellendus rem autem vero magni?</main>
  <aside>
    Lorem ipsum dolor sit amet.
    <div class="bottom"></div>
  </aside>
</div>

<div class="parent">
  <main>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, voluptatem.</main>
  <aside>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quae consequatur aut magni quisquam molestiae
    <div class="bottom"></div>
  </aside>
</div>

score 0 · Answer 4 · answered May 16 '16 at 03:58

0

    <html>
<head>
    <title>Demo</title>
    <style>
        .parentDiv{
            width:100px;
            height:auto;
            position:relative;
            border:1px solid gray;
        }
        .buttonTest{
            width:50px;
            height:30px;
            position:absolute;
            bottom:0;
            right:0;
        }
    </style>
</head>
<body>
    <div class="parentDiv">
        Demo
        <br/>
        <br/>
        <br/>
        <br/>
        <input type="submit" class="buttonTest" value="Button"/>
    </div>
</body>
</html>

here, demo code for you

answered May 16 '16 at 03:58

Quốc Hồ Thanh

35
1

The assumes that one column is taller than the other, which is rarely the case. Again, this solution works, if I am ONLY focused on the sidebar. Once the sidebar is longer than the left column, the sidebar trails off the page, since absolutely positioned elements do not affect the height of the document. – Drakken Saer May 16 '16 at 04:38
you can try with button position is fixed – Quốc Hồ Thanh May 16 '16 at 08:13

Gaurav Mahindra · Answer 5 · 2016-05-16T06:06:36.637

Here you are :-

#parentDiv{
    width: 1200px;
    height: auto;
    display: block;
    top: 0;
    float: none;
    margin: 0 auto;
    background-color: #99d4ff;
    min-height:100%;
    //display: flex;
}

#bottomBox{
        position: relative;
        float: bottom;
        width: 300px;
        height: 250px;
        margin-left: 750px;
        overflow: hidden;
        
}

<div id="parentDiv">
            
    <div style="width:750px;overflow: hidden;margin-right: 0px;">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.  
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.
                Lorem ipsum dolor sit amet, consectetur adipiscing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
                enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
                in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
                sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
                mollit anim id est laborum.
                       
</div>     
    
<div id="bottomBox">
<p>Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here
Botttom Text Here Botttom Text Here Botttom Text Here Botttom Text Here</p>
</div>        
        
</div>

Align content to bottom of div with CSS

5 Answers5