Question

I have two floats inside a div with display:table and margin:auto. It works fine centering these two divs. However when I make window smaller, one of the floats drops down like it should, but the wrapper doesn’t shrink to the new size and so floats inside become aligned to the left instead of being centered. How do you make it shrink appropriately? I mean, display:table is supposed to shrink, why does it not??

So this is what I have originally with large window size

+----------------+ - div {display:table, margin:auto}
|+-----+  +-----+|
||float|  |float||
|+-----+  +-----+|
+----------------+

After making browser window smaller, div size remains the same instead of shrinking to accommodate new float position. It looks like this

+--------------+
|+-----+       |
||float|       |
|+-----+       |
|+-----+       |
||float|       |
|+-----+       |
+--------------+

And this is how it should look

    +-------+
    |+-----+|
    ||float||
    |+-----+|
    |+-----+|
    ||float||
    |+-----+|
    +-------+

Any ideas how to make this work? Is there way to do it without media queries?

Here is a sample code: http://jsfiddle.net/WerPx/1/
It works as intended with larger window size, but if you make the result window smaller, one of the floats goes underneath, but green wrapper doesn’t shrink to accommodate the new size.

Answer 1

Seems like you are trying to make a responsive layout. In your example, you just need to set width: 100% to the wrapper. But if the design is a title more complicated (horizontal nav, footer, sidebar…) then is a good idea use media queries, something like this:

@media (max-width:800px), projection {
  /* The browser window width must not exceed 800px or this device
     must be projected media for these rules to apply */
 }

@media screen and (min-width: 500px) and (max-width: 800px) 
{ 
   /* style sheet that is usable when the viewport is between 500 
      and 800 pixels wide */
}

Further reading:

• Responsive Tutorials and Guidelines in Smashing Magazine
• Adaptive layouts with media queries (tutorial)

EDIT: For your code this is the solution using media queries: http://jsfiddle.net/WerPx/2/