CSS - How to make the columns equals

Question

If I want my div.row3 to be equal in height, how can I code it in CSS if it changes dynamically using ajax. Table cannot be used. (Note: My current code uses js. I want to know if it is possible using CSS)

<div class="gridcontainer">

        <div class="columns">
            <div class="row">
            </div> 
            <div class="row">
            </div>
            <div class="row3">
                DYNAMIC HEIGHT ROW
            </div>
        </div>

        <div class="columns">
            <div class="row">
            </div> 
            <div class="row">
            </div>
            <div class="row3">
                DYNAMIC HEIGHT ROW
            </div>
        </div>

        <div class="columns">
            <div class="row">
            </div> 
            <div class="row">
            </div>
            <div class="row3">
                DYNAMIC HEIGHT ROW
            </div>
        </div>
    </div>
</div>

Thank you

http://stackoverflow.com/search?q=css+equal+height+columns, https://www.google.com/search?q=css+equal+height+columns – please do some research before asking! — CBroe, Feb 21 '14 at 12:41
Chris Coyier at CSS-tricks has written an extensive guide on this: http://css-tricks.com/fluid-width-equal-height-columns/ — peirix, Feb 21 '14 at 12:41
@CBroe I need to make the third row equal. The examples on the net is not the same — newbie, Feb 21 '14 at 13:01
That’s why they are called _examples_. Once you understood the _prinicple_ you should be able to _adapt_ the technique to your specific problem. — CBroe, Feb 21 '14 at 13:07

score 0 · Answer 1 · answered Feb 21 '14 at 12:41

0

Use the table-* display :

.gridcontainer {
   display: table-row;
}

.columns {
  display: table-cell;
}

Demonstration

answered Feb 21 '14 at 12:41

Denys Séguret

372,613
87
782
758

I need to make the third row equal. – newbie Feb 21 '14 at 13:02

RunnicFusion · Answer 2 · 2014-02-21T15:25:23.733

0

maybe you have could do something with this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

or with javascript (please choose css instead:

$(window).load(function(){
        //same height
        if ($(window).width() > 550) {
            $('#container').each(function(){  
                var highestBox = 0;
                $('.eq', this).each(function(){

                    if($(this).height() > highestBox) 
                       highestBox = $(this).height(); 
                });  
                $('.eq',this).height(highestBox);
            });
        }
    });

update

a CSS solution: http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

edited Feb 21 '14 at 15:25

answered Feb 21 '14 at 12:42

RunnicFusion

193
1
3
12

1

This is a terrible solution – Kevin Feb 21 '14 at 12:44
yes, i agree with that. But like i posted, there are many ways to do this with CSS. – RunnicFusion Feb 21 '14 at 12:54
the js is also my previous solution. what i need is the CSS solution – newbie Feb 21 '14 at 13:02
you also could use try this: http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm (updated my answer) – RunnicFusion Feb 21 '14 at 15:26

CSS - How to make the columns equals

2 Answers2