Bootstrap CSS Equal Height Columns - 1

by bizamajig

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<div id="headcontainer" class="container">
</div>
<div id="maincontainer" class="container">
      <div class="row">
         <div class="col-xs-4"> 
            <p>Your Content goes Here!</p> 
         </div>
		 <div class="col-xs-8"> 
            <p>Your Content goes Here!</p> 
            <p>Your Content goes Here!</p> 
            <p>Your Content goes Here!</p> 
            <p>Your Content goes Here!</p> 
            <p>Your Content goes Here!</p> 
            <p>Your Content goes Here!</p> 
         </div>
      </div>
</div>

CSS

#maincontainer, #headcontainer {
width: 100%;
/*padding: 0*/
}

#headcontainer {
background-color:#CCCC99; 
height: 150px
}

#maincontainer .row .col-xs-4{
background-color:gray; 
height:1000px
}

#maincontainer .row .col-xs-8{
background-color:green;
height:1000px
}