title: Set divider to 100% inside div box
body: <p>i am having a problem with one issue. Inside main div i have 3 more divs. One to left one (divider) on the middle and one on the right. This is for my wp widget that's why i cant use px to add that divider height because if widget uses more posts than the set height of divider than it would be shown only on the half. What i need is to set this divider to 100% . So if main box is 100% ( main box isnt set by height) then divider would be the same 100%.</p>
  
  <p>Here is an <kbd><strong><a href="http://jsfiddle.net/ZSgLJ/268/" rel="nofollow">Example</a></strong></kbd></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="blue_box"&gt;
      &lt;div id="left"&gt;Foo&lt;/div&gt;
      &lt;div id="divider"&gt;&lt;/div&gt;
      &lt;div id="right"&gt;Bar&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#divider {
      height:100px;
      width: 5px;
      background-color:white;
      float:left;
      margin:0px;
  }
  #left {
      position: relative;
      float: left;
      width: 40%;
      margin: 0;
      padding: 0;
      height:400px;
      background-color:red;
  }
  #right {
      position: relative;
      float: right;
      width: 40%;
      margin: 0;
      padding: 0;
      height:400px;
      background-color:red;
  }
  #blue_box {
      background-color:blue;
      border-radius: 10px;
      -moz-border-radius:10px;
      -webkit-border-radius: 10px;
      position: relative;
      width: 100%;
      min-width: 400px;
      max-width: 600px;
      padding: 2%;
      height:100%;
      overflow: auto;
      /*needed so that div stretches with child divs*/
  }
  </code></pre>
  
  <p>white line is for example that line i want to stretch 100%</p>
  
  <p>I tried many solutions find here, but it just wont work.</p>