There are so many articles that explains how to make two or more<div> tags same height, but many of them are unnecessary complicated. Some of them even use JavaScript! I'll explain In this article how to solve the problem in an extremely easy way.
If you are not familiar with the problem, let me explain it: if you place two <div> boxes next to eachoder (usually by float:left, or float:right) each box will stretch vertically as far as the content stretches. Why is this bad? For example, this disables you to create left or right-sided vertical bar that stretches as far as the main content (see the image below).
Now, you probably know that this was very easy to do by using Tables. So, what we're going to do is to simulate Table behavior. This is the CSS that makes the magic:
.table{
display:table;
}
.table_row {
display:table-row;
}
.table_row div {
display:table-cell;
}
Next, we'll create one <div> that will act as a container and simulate the Table. Inside that <div> we'll place another one that will act as a table row. That <div> will contain two divs that will act as a table cells. Instead of assigning the CSS for each "cell", we'll apply display:table-cell property to all <div> boxes that are contained in "table row".
<div class="table">
<div class="table_row">
<div class="left">This is the left side</div>
<div class="right">This is the main content</div>
</div>
</div>
The output is shown on the image below.
This code works in Firefox, IE (7), Opera and Safari, so I think it's good enough. 
Of course, you will have to format those <div>s a little bit more, at least to set the width for each <div> in order to see some results.I hope this trick will help you get rid of nightmares 