How to make `.col2` flexible so it will fill space between `.col1` and `.col3`. I tried percents, but it doesn't work. What's the best way to achieve this? Thanks.

```css
body{
 margin:0;
}
.header{
 width:100%;
 background:gray;
 height:120px;
 margin:0 auto;
}
.MainController{
 width:100%;
 clear:both;
}
 .col1{
 height:679px;
 background:yellow;
 width:150px;
 float:left;
}
.col2{
 height:679px;
 background:black;
 float:left;
 width:20%;
}
.col3{
 height:679px;
 background:red;
 width:300px;
 float:right;
}
```

```html
<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="header"></div>
 <div class="MainController">
  <div class="col1"></div>
  <div class="col2"></div>
  <div class="col3"></div>
 </div>
</body>
</html>
```