CODEWITHSUNDEEP
cssresponsive-design
stephmoreland
stephmoreland

Reputation: 4163

CSS Equal Height Columns in Responsive Layout

I have a layout (JSFiddle Example) which uses a header, footer and 3 divs for the left, main and right content. It all works perfectly for me, but I can't figure out how to get the right (with the content "Additional sidebar content...") to be 100% so that the green background takes up all the space under it, up to the footer.

 <title>My Document</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="../respond.min.js"></script>
<body>
    <div class="gridContainer" id="gridContainer">
        <div id="header" class="site-header">
            <div class="wrap">

                <div id="branding" role="banner">
                    <p class="site-title"><a href="http://example.com">Site Title</a></p>
                    <p class="site-description">&nbsp;</p>
                </div><!--#branding-->

            </div><!--.wrap-->
        </div><!--#header-->

        <div id="main">
            <div class="wrap">

                <div id="primary">
                    <div id="content" role="main">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque augue nec nulla dapibus, ac faucibus sapien pellentesque. Vivamus cursus massa odio, id faucibus enim euismod at. Quisque pulvinar ligula risus, sit amet luctus diam molestie at. Aliquam erat volutpat. Maecenas non pellentesque mauris. Proin et vehicula ligula. Nunc fringilla orci in pretium vestibulum. Proin pulvinar elementum rutrum. Vivamus sagittis commodo lacus, sit amet fringilla ipsum rhoncus gravida. Suspendisse molestie felis id nisl iaculis, ut pharetra ipsum porttitor. Ut suscipit, massa ac mollis elementum, tortor tortor eleifend orci, sed interdum metus nisi id est. Morbi laoreet tristique sollicitudin. Cras ut ultrices ligula. Aliquam sed commodo libero. Nullam facilisis tempus cursus.</p>
                    </div><!--#content-->
                </div><!--#primary-->

                <div id="secondary">
                    <div class="widget">
                        <p>Main sidebar content...</p>
                    </div><!--.widget-->
                </div><!--#secondary-->

                <div id="tertiary">
                    <div class="widget">
                        <p>Additional sidebar content...</p>
                    </div><!--.widget-->
                </div><!--#tertiary-->

            </div><!--.wrap-->
        </div><!--#main-->

        <div id="footer" class="site-footer">
            <div class="wrap">

                <p class="site-credits">© Copyright owner</p>

            </div><!--.wrap-->
        </div><!--#footer-->

    </div><!--#page-->
</body>

Upvotes: 0

Views: 867

Answers (2)

Oliver
Oliver

Reputation: 214

I have written a jquery Plugin, which sets two divs to the same height. Additionally, you can set a screen width, where this behaviour stops (for responsiv Layouts).

You find the Plugin here: http://www.dipago.de/news/2/html-css-2-spalten-gleiche-hoehe

For your example, use this code:

$(function () {
    $('#primary').sameBoxHeight({
        box: $('.widget')
    });
});

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25495

Here is one option: http://jsfiddle.net/panchroma/7FFSt/

My only changes to your code are at the very bottom of the stylesheet:

#main{
overflow: hidden; 
}

#primary,
#secondary,
#tertiary{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
    background-color:#82aa38;
}

Essentially all I've done is add a large padding and an equally large negative margin to each of your 3 columns, then added overflow hidden to the #main div which wraps around them.

This is a really useful technique that you can use in all sorts of situations and works like a charm cross-browser.

Hope this helps!

Upvotes: 1

Related Questions