title: 3 columns, middle one with flexible width
body: <p>I'd like to have a layout that consist of three adjacent divs. Side divs have static width (it may change via javascript) and center div fills a remaining area. When the first div's size changes it affect only the center one. It is similar to table (with dynamic rendering) that consist of three columns.</p>
  <p>Ok, but where is the problem.
  The problem is that if I put floating-left div into the first column, and block div in the second and third one, block divs behave in a strange way. They are rendered in their column below floating div from the first column.</p>
  <p>An example.
  In the first and second column I have floating div, and block div in the third column. The block div is shifted down around the height of floating divs. Div in the center column is not shifted in his y position only that it has float left property.</p>
  <p>I'd like to each of the three layouting divs to be independent on each other. I have no idea why elements in the third column floats div in first two columns (with float property).</p>
  <p>CODE:</p>
  <pre><code>&lt;div style=&quot;margin: auto; display: table; width: 260px;&quot;&gt;
          &lt;div style=&quot;display: table-row;&quot;&gt;
              &lt;div style=&quot;display: table-cell; width: 100px;&quot;&gt;
  
                  &lt;div style=&quot;float: left; width: 40px; height: 50px;&quot;&gt;COL1&lt;/div&gt; 
              
              &lt;/div&gt;
              &lt;div style=&quot;display: table-cell;&quot;&gt;
          
                  &lt;div style=&quot;float: left; height: 50px;  width: 40px;&quot;&gt;COL2&lt;/div&gt;
  
              &lt;/div style=&quot;display: table-cell; width: 100px;&quot;&gt;
              &lt;div class=&quot;sideContainer&quot;&gt;
  
                  &lt;div&gt;COL3&lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>How do I make all layouting divs (columns) to be independent on each other? Any ideas?</p>