Height 100% of floated elements

Question

What I want to do is that if the row has one div bigger all the other items of the row get the same height. For example here is the problem: https://i.stack.imgur.com/QdBDl.png

this is the markup:

<div class="box clearfix">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">
</div>

.col-lg-4{
    width: 33.33333333333333%;
    float:left;
    height: 100%; 
}

Height 100% is not working since they are float elements I guess. How can I workaround this?

I use a jQuery plugin that matches the height per .row. You are missing the .row in your code. Bootstrap's grid is such that if you don't include a .row around your column classes, the padding will be extra big on the outside. Also, .col-md-6 and .col-sm-6 are redundant, you just need .col-sm-6. Use the actual .row structure for your grid so that it works properly. https://github.com/liabru/jquery-match-height — Christina, Oct 13 '14 at 16:06
Have you considered using a masonry type solution, that would look nice. Also, I don't think (though I didn't check) that your code is closing all divs/ because your footer is cut off and it is likely supposed to be 100%. — Christina, Oct 13 '14 at 16:08
You could also check out my answer here which offers a css solution for complex grids: http://stackoverflow.com/questions/24571062/gap-in-bootstap-stacked-rows, which you can see working in this example: http://www.bootply.com/U91pZvp81q — jme11, Oct 13 '14 at 16:21

score 2 · Answer 1 · answered Oct 13 '14 at 14:28

2

Height 100% works if: - the height of the outer block is specified, or an element with a height of absolutely positioned.

answered Oct 13 '14 at 14:28

Art Hitrick

145
6

1

So, what alternative do I have? How can I make the result I'm looking for? thanks! – Oct 13 '14 at 14:31

Magnus Engdal · Accepted Answer · 2014-10-13T14:58:11.463

1

You could do something like this

HTML

<div class="box clearfix">
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6"></div>
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6"></div>
        <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6"></div>
</div>

Javascript

$(function () {
    $('div.box').each(function () {
        var maxHeight = 0;
        $('div', this).each(function () {
            if (maxHeight < $(this).outerHeight()) maxHeight = $(this).outerHeight();
        }).css({
            'height': maxHeight
        });
    });
});

And here on JSFIDDLE

edited Oct 13 '14 at 14:58

answered Oct 13 '14 at 14:32

Magnus Engdal

5,446
3
31
50

It works but now some text are cut out :S Take a look at the final ones – Oct 13 '14 at 15:10
Your problem is that all the images didn't finish loading before the script runs, so it takes the `.height()` of the element without the image, then the image loads and pushes the text outside the box. You can solve this two ways. Either you set a fixed height and width to the images so that they fill out the div before they load, or you use `$(window).load(function() {});` instead of `$(function() {});` which will wait for the images to load before the script runs. – Magnus Engdal Oct 13 '14 at 16:03

Salman A · Answer 3 · 2014-10-13T14:42:09.163

Ditch floats and use a combination of display: table and display: table-cell. Table layout is one possible way to achieve equal height columns.

.box {
    display: table;
    width: 100%;
}
.col-lg-4 {
    width: 33.33333333333333%;
    background: #CCC;
    display: table-cell;
}
.col-lg-4:nth-child(even) {
    background: #EEE;
}

<div class="box clearfix">
    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">One</div>
    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">Two<br/>Two</div>
    <div class="col-lg-4 col-md-6 col-xs-12 col-sm-6">Three<br/>Three<br/>Three</div>
</div>

score 0 · Answer 4 · answered Oct 13 '14 at 14:29

0

100% will only make it 100% to what is inside of the div itself. That's why it isn't staying the same.

Try defining a fixed height like "height:250px;" that way they stay the same.

answered Oct 13 '14 at 14:29

user3074962

3
1

I can't define a fixed height since every row has divs with longer texts or shorter texts. And the section content will grow. – Oct 13 '14 at 14:30

score 0 · Answer 5 · answered Oct 13 '14 at 14:32

0

div class="box clearfix" this one should be 100%, and set the other div with constant height. For example height: 200px;

answered Oct 13 '14 at 14:32

Therapyx

5
4

Height 100% of floated elements

5 Answers5