Equal Height Technique

aad-ban1

One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. So how can we make all columns appear to be the same height? Several techniques was introduced to solve this issue.

  • Faux Columns- The simple secret is to use a vertically tiled background image to create the illusion of colored columns.
  • Equal Height Columns – revisited- A method to make all columns appear to be the same height but without the need for faux column style background images.

Equal height boxes with CSS- The trick is to use the CSS properties display:table, display:table-row and display:table-cell to make containers (in this case div elements) behave like table cells. The basic XHTML structure looks like this:

 <div class="equal">    <div class="row">    <div class="one"></div>    
<div class="two"></div>     <div class="three"></div>    </div>    </div>

Here is the CSS used to make this structure behave like a table:

 
    .equal {
            display:table;
    }
    .row {
            display:table-row;
    }
    .row div {
            display:table-cell;
    }

aad-ban
Advertisements

6 thoughts on “Equal Height Technique

  1. Good day! This is kind of off topic but I need some guidance from an established blog. Is it very difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast. I’m thinking about setting up my own but I’m not sure where to begin. Do you have any tips or suggestions? Thanks

  2. Hi there! I could have sworn I’ve been to this blog before but after checking through some of the post I realized it’s new to me. Anyways, I’m definitely delighted I found it and I’ll be book-marking and checking back often!

  3. Hello there! I know this is kinda off topic but I was wondering which blog platform are you using for this website? I’m getting sick and tired of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform. I would be great if you could point me in the direction of a good platform.

  4. Having read this I believed it was rather informative. I appreciate you taking the time and effort to put this content together. I once again find myself personally spending way too much time both reading and leaving comments. But so what, it was still worth it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s