Databases
StackOverflow2013
Postsdbo
POHow to use "width auto" and "float" to align divs?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to use "width auto" and "float" to align divs?
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload