3 divs filling up all the line

by Jorge Bustos Pereda

HTML

<div class="container">
  <div class="first">
      FIRST
  </div>
  <div class="second">
      SECOND. Let's add some more content and see what happens
  </div>
  <div class="third">
      THIRD
  </div>
</div>
<input type='button' onclick='toggle()' value="toggle"/>

CSS

.container {
    position: relative;
    width: 100%;
    height: 50px;
}

.first {
    width: 100px;
    height: inherit;
    position: absolute;
    left: 0;
    background-color: #FAA;
}

.second {
    width: auto;
    height: inherit;
    position: absolute;
    top: 0;
    margin: 0 200px 0 100px;
    background-color: #AFA;
}

.third {
    width: 200px;
    height: inherit;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #AAF;
}

JavaScript

toggle = function() { $('.second').toggle() }