Friday 25 May 2012

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><href="">Home</a></li>
                        <li><href="">About</a></li>
                        <li><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{
    width500px;
}
.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{
    margin10% auto;
    background#EEE;
}
.same-height-menu-column
.menu-column{
    width150px;
}
.same-height-menu-column{
    background#DDD;
}
.menu-column{
    floatleft;
}
.content-column{
    floatright;
    width350px;
}


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

No comments:

Post a Comment