SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    India
    Posts
    52
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Equal height columns on this site via only css.

    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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,795
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.)

    Code:
    #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

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2010
    Location
    India
    Posts
    52
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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! :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •