CODEWITHSUNDEEP
cssheightabsolute
Damien
Damien

Reputation: 333

force floating divs to touch bottom of their parent

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

Upvotes: 0

Views: 947

Answers (3)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

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

Upvotes: 2

Jay
Jay

Reputation: 792

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

Upvotes: 1

Valentin Mercier
Valentin Mercier

Reputation: 5326

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

Upvotes: 0

Related Questions