title: How to use "width auto" and "float" to align divs?
body: <p>i would like to have a container (with some text) on the left of the page, <strong>that adapts itself</strong> with the space available, and 2 sidebars following on the right (i'm using Wordpress).
  (The 2 sidebars work fine with <code>float</code>. ) So i tried <code>width:auto</code> on the container.</p>
  
  <p>But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to <em>70%</em>, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</p>
  
  <p>Do you know how to fix this? </p>
  
  <pre><code>#container { /* the text */
      overflow:auto;
      width:auto;
      position:relative;
      float:left;
  }
  
  #primary { /* first sidebar */
      position:relative;
      border:1px solid red;
      float:right;
      width:250px;
  }
  
  
  #second { /* second sidebar */
      border:1px solid red;
      background:white;
      width:250px;
      height:auto;
      float:right;
      margin-left:15px;
  }
  </code></pre>
  
  <p>Thanks</p>
  
  <hr>
  
  <p>EDIT :</p>
  
  <p>let's say i'm using this instead of the wordpress sidebars : i still can't manage to make it work, could someone have a look with this simple code? there're 2 boxes : the green one and the red one...</p>
  
  <pre><code>&lt;!DOCTYPE&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
      &lt;/head&gt;
          &lt;body&gt;
  
              &lt;div style="position:relative; width:700px; margin:0 auto;"&gt;
                  &lt;div style="width:auto; border:1px solid green;"&gt;i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container.
  
  But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.&lt;/div&gt;
  
  &lt;div style="width:20%; float:right; border:1px solid red;"&gt;blablabla&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>