title: Flexible height for the whole page and divs
body: <p>i used many ways to make a flexible height to the divs and the whole page but no way .</p>
  
  <p>what i want to do is :</p>
  
  <p>i have 2 columns in the page after the header (right_side , left_side)
  the both left and right sides will contain flexible content .</p>
  
  <p>so i need the height of the both columns be flexible.
  also want the right side height depends on the left side because maybe the article will be taller than the right content ..  </p>
  
  <p>i tried "height" and "min-height" but no way</p>
  
  <p>this is my code</p>
  
  <pre><code>&lt;html style="min-height: 100%;"&gt;
  
  &lt;body style="min-height: 100%; width: 980px; border-right: 2px solid black;  
    border-left: 1px solid black; margin: 0 auto;"&gt;
  
      &lt;div&gt;&lt;img src="header.jpg"/&gt;&lt;/div&gt;
  
      &lt;div id="content" style="min-height: 100%"&gt;
      &lt;div id="right" style="background: red; float:right; width: 280px;  min-height: 100%;"&gt;my flexible right content&lt;/div&gt;
      &lt;div id="left" style="background: blue; float:left; width: 700px; min-height: 100%;"&gt;
      &lt;p&gt;my flexible article &lt;/p&gt;
      &lt;p&gt;my flexible article &lt;/p&gt;
  
     &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>