CODEWITHSUNDEEP
jquerycsshtml
Farzad Bayan
Farzad Bayan

Reputation: 251

responsive and equal height for a set of boxes

enter image description here

There are three boxes in a line, each one containing an image and a title. I can use height property to make their height equal. But in a Responsive view, when the boxes shrink, because of the fixed height, a box will look with an extra white space after the title (specially when the title fill just a line, not two)

I can use padding-bottom, but it will not give my boxes an equal height, because some have a longer title and will fill two line instead of one, so will have more height.

What's the solution of giving these boxes an equal height which don't make me extra white space when shrink in responsive view?

Upvotes: 1

Views: 333

Answers (4)

Sallar
Sallar

Reputation: 730

This problem of yours is a unversal problem which can be solved by CSS only solutions, but you should choose carefuly the solution you need.

Chris Coyier has published a great article on equal height fluid width items with 4 different CSS methods, which I personally like the FlexBox Method if you don’t care about the browser support.

Article: http://css-tricks.com/fluid-width-equal-height-columns/
Demo: http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

Have Fun.

Upvotes: 0

phpguest
phpguest

Reputation: 804

For solving this problem change height property with min-height which makes your box auto-resizable and add padding-bottom for increasing the bottom white space as you want.

Upvotes: 0

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34170

if you use jquery add this code to the bottom of your page:

var max=0;
$('article').each( function (){
    if($(this).height()>max)
        max=$(this).height();
});
$('article').height(max);

Upvotes: 1

Ashkan Mobayen Khiabani
Ashkan Mobayen Khiabani

Reputation: 34170

use overflow:hidden and height for your boxes (parent of the text containing element):

<div style="overflow:hidden;height:150px;">

Edit: http://jsfiddle.net/G4PvQ/2/

Upvotes: 0

Related Questions