Equal height columns on this site via only css

HTML & CSS
1

Hi,

There’s this site for a client of my company where I work - www dot direct holidays dot co dot uk/holidays (without the spaces, of course!) that has gone live but has an unequal height boxes problem.

The boxes (summer 2010, egypt, canaries) have unequal heights. For a dirty fix, there’s a trick to give a min-height: 260px; to the .subhome2feature class.

For the ideal fix, I tried making the id contentPanel2 display: table; width: 100% and then the classes col1row1(2 and 3) as display: table-cell; and width: 33%; but that didn’t work out.

Can anyone suggest me any other fix? I am just to add something to CSS to make it look good. I can’t alter the divs as there’s no access to jsp. If there’s no fix by only css, then I’ll have to tell them it’s not possible without altering the jsp.

2

Hi,

I’ve only tested this roughly with Firebug but if you add these rules after the original it should do what you want in Firefox at least. (You will of course need to set up the original rules for ie7 and under as they don;t understand display table properties.)


#col2 #contentPanel1, #col2 #contentPanel2, #col2 #contentPanel3, #col2 #contentPanel4, #col2 #contentPanel5 {
	display: table;
	table-layout:fixed;
	width:100%;
	border-spacing:10px;
}
.subhome2feature {
	background-color: #FFFFFF;
	border:none;
	margin: 0;
	padding: 1px;
}
#col2 #contentPanel2 .col1row1, #col2 #contentPanel2 .col2row1, #col2 #contentPanel3 .col1row1, #col2 #contentPanel3 .col2row1, #col2 #contentPanel4 .col1row1, #col2 #contentPanel4 .col2row1,  #col2 #contentPanel2 .col1row1, #col2 #contentPanel2 .col2row1, #col2 #contentPanel2 .col3row1, #col2 #contentPanel3 .col1row1, #col2 #contentPanel3 .col2row1, #col2 #contentPanel3 .col3row1, #col2 #contentPanel4 .col1row1, #col2 #contentPanel4 .col2row1, #col2 #contentPanel4 .col3row1 {
	display:table-cell;
	float:none;
	vertical-align:top;
	width:200px;
	background-color: #FFFFFF;
	border: 2px solid #9F91C5;
}

It will need testing :slight_smile:

3

Excellent! It worked like a charm at least in firebug. I will test it out in other browsers, especially IE7.

The reason why it wasn’t working when I did was, I wasn’t adding border to the columns, I think.

Thanks a lot Paul. You’re a star! :slight_smile: