force floating divs to touch bottom of their parent

Question

I have a common problem in a specific case... I try to auto expand the height of floatings divs for force them to touch the bottom of their parent.

Here is an example : http://jsfiddle.net/k95nK/1/ My goal is that all floating column has the same height, and touche the bottom of the contener. (So the columns must all have the height of the one with the most content) The height of the parent cannot be fixed. The contents must increase the height of the parent.

.content {
width : 150px;
background-color : #123456;
float : left;
margin-right : 10px
}

#allcontent {
background-color : #90c89a;
}

#allcontent:after {
content:"";
display: table;
clear: both;
}


<div id="allcontent">
    <div class="content">hello</div>
    <div class="content">hello</br>hello</div>
    <div class="content">hello</div>
</div>

I know this kind of solution is often asked, (How to get a div to resize its height to fit container?) but i can't find a solution for my specific case.

I've tried to use absolute positioning, but it seems to makes them outside of the document flow...

Are you asking for the boxes height to expand to the bottom or for the boxes to align to the bottom? — Jay, Jul 22 '14 at 10:25
My goal is that the boxes expand to the bottom. And the height of the parent must be the height of the longest boxes, so a non fixed height. — Damien, Jul 22 '14 at 10:34

score 2 · Answer 1 · answered Jul 22 '14 at 10:35

2

Remove float:left and apply display:table-cell to your content div.

.content {
width : 150px;
background-color : #123456;
display:table-cell;
border-right:10px solid #90c89a;
}

DEMO

answered Jul 22 '14 at 10:35

Suresh Ponnukalai

13,820
5
34
54

Jay · Answer 2 · 2014-07-22T10:34:44.780

1

You need to put a height on the container and then set the inside div height to 100%, like so;

#allcontent {
    background-color: rgb(144, 200, 154);
    height: 320px;
}
.content {
    background-color: rgb(18, 52, 86);
    float: left;
    height: 100% !important;
    margin-right: 10px;
    vertical-align: top;
    width: 150px;
}

EDIT:

Without using fixed height, you will need to use border or padding for the spacing between divs;

.content {
    background-color: rgb(18, 52, 86);
    display: table-cell; /* **** ADD THIS STYLE **** */
border-right: 20px solid rgb(144, 200, 154); /* **** Using border with same colour as background to give spacing effect **** */
    margin-right: 10px;
    width: 150px;
}

edited Jul 22 '14 at 10:34

answered Jul 22 '14 at 10:28

Jay

772
1
6
17

Thanks, but the container can't have a fixed height. My goal is that the content increases the height of the container. – Damien Jul 22 '14 at 10:32
Try my update, it works but you will need to use border or padding to space out the content divs. – Jay Jul 22 '14 at 10:35
Just a question, because my case is quite complex... If the contener is more big (but not fixed) than the table cells, like here : http://jsfiddle.net/k95nK/5/ Is there a solution ? – Damien Jul 22 '14 at 11:17
Im looking at your fiddle but the you have a height on the container? if you was to remove the height what else would be going there? there should be no reason why the background is bigger than the cells if you dont have a height on the container – Jay Jul 22 '14 at 11:38
Also please mark original answer to answered for future users :) – Jay Jul 22 '14 at 11:43
Thanks for you answer. I have updated the jsfiddle here : http://jsfiddle.net/k95nK/6/ As you can see, in this case, the 3 boxes doesn't touch the bottom. – Damien Jul 22 '14 at 11:48
Firstly you should not have table-cell inside table-cell, you need a container to display as table, this alone doesnt fix the problem however. May i ask why description is no longer inside the allcontent? – Jay Jul 22 '14 at 11:54
Ok ive manage to get it working with the new html setup. Its alot of css to be honest, it might be worth making a new question – Jay Jul 22 '14 at 12:02
Thank you, and I think you're right, it's better to put description inside allcontent. Many Thanks. – Damien Jul 22 '14 at 12:06
It does work without being inside. just alot of css so will need a new question i think. p.s please mark one of the answeres to answered for future viewers who have this problem. – Jay Jul 22 '14 at 12:08

score 0 · Answer 3 · answered Jul 22 '14 at 10:31

If you use floats you only have two possibilities.

1) Define a fixed height for all your elements

.content {
    height: 288px
}

See an example jsfiddle here: http://jsfiddle.net/k95nK/2/

2) Use tables

With tables it is a trivial problem to solve but it is nowadays considered as old technology

force floating divs to touch bottom of their parent

3 Answers3