CSS same height blocks

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/ktmzk3jk/

I’d like to make the red background on the blocks the same height.

I’m sure I could do it with Jquery but is there a standard CSS soultion.

<div class="container">

	<div class="row">

		<div class="col-sm-4 col"> 
			<div class="block">
				<h3>65%</h3>
				<p>Some Text Some Text</p>
			</div>
		</div>

		<div class="col-sm-4  col"> 
			<div class="block">
				<h3>20%</h3>
				<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
			</div>
		</div>

		<div class="col-sm-4  col"> 
			<div class="block">
				<h3>5%</h3>
				<p>Some Text Some Text Some Text Some Text Some Text Some Text Some Text Some Text</p>
			</div>
		</div>

	</div>

</div>
2

I would use display:table (ie8+) and display:table-cell to do this rather than bootstraps floats.

You can see the effect if you add this to your fiddle.

.row{display:table;border-spacing:20px 0}
.col{float:none;display:table-cell;vertical-align:top;background:red}

Of course you should never directly change bootstrap classes so you would need to do that with class over-rides (or even better just forget the bootstrap classes altogether on that element and use a new structure of your own using the code I gave above).

It’s simple to do and no need for framework help for that element. The only problem is that the gap between columns is achieved with border-spacing which means the first and last columns are also indented a little. You can get around this by adding another wrapper and dragging it a little wider to start with by using negative margins.

To collapse the columns into single columns just change the display:table-cell to display:block at the appropriate point in your media query.

1 Like
3

Thanks PaulOB - I ALWAYS forget about display:table

4

Display: table is definitely the way to go. Each cell will contain all of your content and if one cell stretches, so will the others in that row. Great for equal height backgrounds with expanding content.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.