960gs Fill Div Vertically CSS

Question

I know this CSS question has been asked everywhere around the internet. But Im having massive difficulty making the purple and green divs fill their remaining space so they are the same height as the yellow twitter feed:

http://jsfiddle.net/n5558/

HTML

<div id="main">
    <div id="primary" class="home">
        <div id="content" role="main">
            <div id="main-content" class="container_12">
                <div id="info" class="grid_4">
                    <div id="networking">
                            <h2>RSViP - Business Networking</h2>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus lobortis orci, sed vestibulum leo dapibus et. Fusce in dolor velit, sit amet vehicula est. Integer elit sapien.</p>  <a href="">Apply for Business Networking</a>
    <a href="">Free Trial</a>

                    </div>
                    <div id="card">
                            <h2>RSViP - Card</h2>

                    </div>
                </div>
                <div id="twitter" class="grid_4">
                        <h2>News / Twitter Feed</h2>

                    <ul>
                        <li>
                            <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>

                            </p>
                            <p id="date">3rd Apr 04:57 PM</p>
                        </li>
                        <li>
                            <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>

                            </p>
                            <p id="date">3rd Apr 04:08 PM</p>
                        </li>
                        <li>
                            <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>

                            </p>
                            <p id="date">3rd Apr 03:28 PM</p>
                        </li>
                        <li>
                            <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a>

                            </p>
                            <p id="date">3rd Apr 03:28 PM</p>
                        </li>
                    </ul>
                </div>
                <div id="col3" class="grid_4">
                        <h2>RSViP Free Subscription</h2>

                </div>
            </div>
        </div>
    </div>
</div>

CSS

.home #main-content {
    margin-top: 23px;
    margin-bottom: 23px;
    height: 100%;
}

/*Col1 - Info*/
.home #info {
    width: 270px;
    padding-right: 30px;
    background: url('images/divider.png') repeat-y top right;
    height: 100%;
    background: purple;
}

/*Col2 - Twitter*/
.home #twitter {
    padding-left: 10px;
    width: 290px;
    background: yellow;
}

.home #twitter ul {
    list-style: none;
    margin: 0; padding: 0;
}

/* Col3 */
.home #col3 {
    background: green;
}

/* 960.gs */

Thank you, Peter

Answer 1

Heres my Solution / Hack that worked:

.home #main-content {
    margin-top: 23px;
    margin-bottom: 23px;
    overflow: hidden;
}

.home #main-content div {
    padding-bottom: 9999px;
    margin-bottom: -9999px;
}

Answer 2

You can use jquery to do it easy. http://jsfiddle.net/Bushwazi/tuKEJ/

$('#main-content > div').height($('#main-content').height());