Making two column divs equal height using CSS | Equal height Dive without using Jquery | Fluid Equal Height Columns using CSS

Equal height columns is necessity of UI Developer. Creating a equal height columns DIVs using CSS is really a tough task for developers. At the end they have use tables to create Equal height columns.

Because to manage same height for every columns div is very tough as we know every div content can vary par page.

Here I posting the post for resolution of this issue of Equal Height. Solution provided by is a tricky thing done is css.

HTML Code

<div class="container">
        <div class="first-column">
            <ul>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
            </ul>
        </div>
        <div class="second-column">
            <ul>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
                <li>dfsdf asdfasdfa asdfa</li>
            </ul>
        </div>
    </div> 

CSS Code

 
<style type="text/css">
        ul li
        {
            list-style-type: disc;
            list-style-type: none;
            display: block;
        }
        .container
        {
            width: 600px;
            background: grey;
            float: left;
            overflow: hidden;
        }
        .first-column
        {
            width: 300px;
            border-left: 1px solid red;
            float: left;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
        .second-column
        {
            width: 296px;
            border-left: 1px solid red;
            float: left;
            padding-bottom: 500px;
            margin-bottom: -500px;
        }
    </style>

Here container class is wrapper for both column DIVs. margin-bottom and padding-bottom should have same value and its value will defer according to page content height. So always try to use maximum page height.

Example:- if your content height is 2000px then change margin and padding value with more than 2000 or more.

I hope this code will help all developers to make equal height DIVs. Please feel free to ask for any query at hari1_prasad@hotmail.com or click here.