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>

I hope this code will help all developers to make equal height divs. Please feel free to ask for any query.