Equal Height Division Using Javascript And CSS

This technique is really simple. Having equal height division in your design is sometimes necessary to maintain consistent look and feel on your layout. You can use this technique to make your sidebars equal height, or to make your content area and the sidebars equal height.

Get The Source Code:  Without Jquery  With Jquery

Step 1:
Create an index.html file for your layout. I create an example html layout for this article.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Equal Height Division Using Javascript and CSS</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" language="javascript" src="javascript.js">
    </script>
</head>

<body onload="grabtheclass()">
    <div class="outer">
        <div class="inner">
            <div class="main">
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
                <p>The Main Content</p>
            </div>
            <div class="sidebar">
                <p>The Sidebar Content</p>
                <p>The Sidebar Content</p>
                <p>The Sidebar Content</p>
            </div>
        </div>
    </div>
</body>
</html>

Continue reading Equal Height Division Using Javascript And CSS