Forcing two row-fluid to be same size

Question

I have been struggling with a problem and can't figure out how to solve it:

I have made a FIDDLE :

HTML:

        <div class="row-fluid">

            <div class="span6">
                <div class="alert alert-info">
                    this has text <br>
                    this has text <br>


                </div>
            </div>
            <div class="span6">
                <div class="alert alert-success">
                    <div class="media">
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.<br />  
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.<br />
                        This needs to be same size as the other box.

                    </div>
                </div>
            </div>
        </div>
    </div>   
</body>

I want both boxes to be the same size regardless if theres text in the boxes or not. I have tried adding some javascript, but I havent figured out how to do it.

This might help http://stackoverflow.com/a/19695851/2737978 – Quince Sep 09 '14 at 10:39 — Quince, Sep 09 '14 at 10:39

score 1 · Answer 1 · answered Sep 09 '14 at 10:29

1

Simply add min-height you want to have

FIDDLE

.alert{
    min-height:150px;
}

Hope i have understood you right

answered Sep 09 '14 at 10:29

Richa

3,261
2
27
51

1

Only issue with this would be if the content took the box over 150px, one would be at the content size while the over at 150px – Quince Sep 09 '14 at 10:30
He wants the boxes to ALWAYS be the same height. Your example does not do this if the second box is larger than 150px. – timo Sep 09 '14 at 10:30
@Quince If that is case he can use overflow i guess – Richa Sep 09 '14 at 10:32
1

@ Richa Yeah if you don't want to use JS then that would have to be the way – Quince Sep 09 '14 at 10:37
actually saying that here is a pure css route from a simillar question http://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height – Quince Sep 09 '14 at 10:38
@Quince But. How can I use the overflow? – Kalle Sep 09 '14 at 13:00
@user3282532 set it to auto and set a fixed height in the boxes is what i think @ Richa was saying but this will then mean you have scrolling divs which might not be what you want. using the negative margin positive padding trick from the answer i linked to seems to be the closest you can get with out JS. – Quince Sep 09 '14 at 13:11
@Quince Okay, but is it easy to use JS instead? – Kalle Sep 09 '14 at 13:17
@user3282532 ill provide an answer showing an example and then you can decided which approach you prefer – Quince Sep 09 '14 at 13:20
@user3282532 are you using jQuery? – Quince Sep 09 '14 at 13:22
@Quince yes, alittle. That sounds great. Im going to a meeting now, so ill check it when ill get home. – Kalle Sep 09 '14 at 13:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60897/discussion-between-quince-and-user3282532). – Quince Sep 09 '14 at 13:43

score 1 · Accepted Answer · answered Sep 09 '14 at 13:41

So here is an example using jQuery, it looks for all your rows then targets the columns that must match sizes inside each row. My having the row and col passed in as parameters it should mean if you change your structure you can just update the call with what ever class names you are using.

var updateHeights = function (rowTarget, colTarget) {

    $(rowTarget).each(function () {
        var maxHeight = 0;
        $(colTarget, this).each(function () {
            if (maxHeight <$(this).height()) {
                maxHeight = $(this).height();
            }
        });

        $(colTarget, this).each(function () {
            $(this).height(maxHeight);
        });
    });

};

updateHeights('.row-fluid','.alert');

fiddle: http://jsfiddle.net/leighking2/rk4t6c45/

The one thing i don;t like about it is the fact it loops twice, once to find the largest height then again to set it.

Not unless you have maybe 100+ things to align – Quince Sep 10 '14 at 05:30 — Quince, Sep 10 '14 at 05:30

score 0 · Answer 3 · answered Sep 09 '14 at 10:46

0

You need to add the "alert" class together with the span-6 class, because the span-6 class is the one giving the visual information after that you can set min-height for alert

answered Sep 09 '14 at 10:46

Roi

503
1
12
25

score 0 · Answer 4 · answered Sep 09 '14 at 14:32

Here's a pure JS solution for equalising the heights of matched elements. It also works on resize.

function setHeights(){
    //get all the elements that need to be equal height:
    var elements = document.getElementsByClassName('alert');
    //call the equaliseHeights prototype method
    elements.equaliseHeights();
}

/* Extend the HTMLCollection prototype */
HTMLCollection.prototype.equaliseHeights = function() {
    var maxHeight=0;
    //loop through the collection to find the height of the tallest element:
    for (var i = 0; i < this.length; i++) {         
        this[i].style.minHeight = 0; //reset min-height     
        var thisHeight = this[i].offsetHeight; //measure height
        maxHeight = (thisHeight>maxHeight)?thisHeight:maxHeight; //store the greatest height
    }
    //now set the min-height for all:
    for (var i = 0; i < this.length; i++) {        
        this[i].style.minHeight = maxHeight+"px"; //set min-height
    }
    return this;
};

/* on load */
(function waitForReady(){
    if (document.readyState === "complete") {

        setHeights();//on load, call method
        window.onresize = setHeights;//on resize, call method

    } else {
        setTimeout(waitForReady,10);
    }
})();

http://jsfiddle.net/r5ye65vz/5/

Forcing two row-fluid to be same size

4 Answers4