Divs with equal height

This is my simple solution of equal height divs without any hacks.

Basics

Basic idea was simple solution of same height problem. This is my solution:

• 5 divs
• No css hacks
• Image slider inspired
• Div with class same-height-wrap-full represents color of right column
• Div with class same-height-menu-column represents color of left column
• Div with class same-height-wrap-inner is viewport for columns content
• Div with class menu-column is content of left column
• Div with class content-column is main content of page (right column)

HTML:

<!-- This is background of main content -->
<div class="same-height-wrap-full">
    <!-- This is backgroun of aside content -->
    <div class="same-height-menu-column">
        <!-- Viewport for columns -->
        <div class="same-height-wrap-inner">
            <!-- Menu column -->
            <div class="menu-column">
                <nav>
                    <ul>
                        <li><a href="">Home</a></li>
                        <li><a href="">About</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <!-- Content column -->
            <div class="content-column">
                <h1>Content</h1>
            </div>
        </div>
    </div>
</div>​

CSS:

.same-height-wrap-full, 
.same-height-wrap-inner{
    width: 500px;
}
.same-height-wrap-inner:before,
.same-height-wrap-inner:after {
    content:"";
    display:table;
}

.same-height-wrap-inner:after {
    clear:both;
}
.same-height-wrap-inner {
    *zoom:1;
}

.same-height-wrap-full{
    margin: 10% auto;
    background: #EEE;
}
.same-height-menu-column, 
.menu-column{
    width: 150px;
}
.same-height-menu-column{
    background: #DDD;
}
.menu-column{
    float: left;
}
.content-column{
    float: right;
    width: 350px;
}


Demo:
http://dabblet.com/gist/2819076
​