Высота боковых блоков по размеру контента - Вопросы по CSS

.cols {
	overflow: hidden;
	width: 100%;
}
.cols .col  {
	margin-bottom: -10000px;
	padding-bottom: 10000px;
	display:block;
	float:left;
	width:32%;
}

<div class="cols">
	<div class="col">Контент</div>
	<div class="col">Контент</div>
	<div class="col">Контент</div>
</div>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
var nc = jQuery.noConflict();

function equalHeight(group) {
     var tallest = 0;
     group.each(function() {
          thisHeight = nc(this).height();
           if(thisHeight > tallest) {
                  tallest = thisHeight;
           }
     });
     group.height(tallest);
}    
    
nc(window).load(function() {
    equalHeight(nc(".equal"));
}); 
nc(window).resize(function(){      
    equalHeight(nc(".equal"));
}); 
</script>

<div class="cols">
	<div class="col">Контент</div>
	<div class="col">Контент</div>
	<div class="col">Контент</div>
        <div style="clear: both;"></div>
</div>

<div style="clear: both;"></div>

<div class="wrapper">
  <div class="right-wrap">
    <div class="content-wrap”>
      <div class="left-wrap">
        <div  class="left">Содержимое</div>
        <div class="content">Содержимое</div>
        <div  class="right">Содержимое</div>
      </div>
    </div>
  </div>
</div>

.wrapper  {
  width: 900px;
  margin-left: auto;
  margin-right:auto;
}
.right-wrap {
  width: 100%;
  float:left;
  background-color: green;
  overflow:hidden;
  position:relative;
}
.content-wrap  {
  float:left;
  background-color:blue;
  width: 100%;
  position:relative;
  right: 300px;    
}
.left-wrap {
  width: 100%;
  position:relative;
  right: 400px; 
  float:left;
  background-color: #f00;
}

.left {
  float:left;
  width: 200px;
  overflow:hidden;
  position:relative;
  left: 700px;
}

.content  {
  float:left;
  width: 400px;
  overflow:hidden;
  position:relative;
  left: 700px;
}

.right  {
  float:left;
  overflow:hidden;
  width: 300px;
  background-color:#333;
  position:relative;
  left: 700px;
}

 <div class="wrapper">
      <div id="left"></div>
      <div id="content”></div>
      <div id="right"></div>
 </div>
 <div  class="foother"></div>

.wrapper  {
           overflow: hidden;
	height: auto;
	width: 980px;
           margin-top: 0;
	margin-right: auto;
	margin-left: auto;
}
#left, #content, #right{
	margin-bottom: -10000px;
	padding-bottom: 10000px;
	float:left;
            width: 32%;
}
#content{
            min-height:900px;
}
#foother {
	clear: both;
           width: 980px;
	height: 90px;
	margin:0 auto;
}