960gs Fill Div по вертикали CSS

Question

Я знаю, что этот вопрос CSS задавался во всем мире. Но Im имея массивные трудности, делая фиолетовые и зеленые дивы заполнить их оставшееся пространство так, что они имеют одинаковую высоту, как желтый Твиттер:

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 */ 

Спасибо, Питер

Answer 1

Heres мое решение/Hack, которые работали:

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

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

Answer 2

Вы можете использовать jquery, чтобы сделать это легко. http://jsfiddle.net/Bushwazi/tuKEJ/

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