Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS shrink browser window, float white space
    primarykey
    data
    text
    <p>I am in the following situation: I have a container that has display set to inline-block. So the width of the container depends on the content inside it.</p> <p>Inside the container I have two divs floated left;both have fixed width;the divs float next to each other where the browser window width is bigger that the sum of the widths the two divs have. </p> <p>But, and here comes my problem, when I shrink the browser window so that the two divs won't fit next to each other anymore, the second floated div goes under the first floated div (as it should, I am happy with this), but the width of the container does not modify, even though the second div isn't there anymore, the container still preserves the space for it. I would link the container to shrink as well to the width of the bigger floated div.</p> <p>Any help would be apreciated. Thanks a lot! </p> <pre><code>.Container { position:absolute; top:180px; width:100%; text-align:center; background: #DDD; } .Container span { position:relative; margin-top:0px; text-align:left; display: -moz-inline-stack; display:inline-block; zoom: 1; *display: inline; cursor:default; background: red; } .div1 { display:block; float:left; padding:0; width:100px; background: coral; } .div2 { display:block; float:left; padding:0; width:200px; background: #45dc2a; } </code></pre> <p>HTML</p> <pre><code>&lt;div class="Container"&gt; &lt;span&gt; &lt;div class="div1"&gt;&lt;/div&gt; &lt;div class="div2"&gt;&lt;/div&gt; &lt;/span&gt; &lt;/div&gt; </code></pre> <p>Demo: <a href="http://jsfiddle.net/C4Hcm/" rel="nofollow">http://jsfiddle.net/C4Hcm/</a></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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