How to stop divs from collapsing on page resize?

Question

HTML:

<div id="wrapper">

    <div id="tabs">   
    </div> <!-- tabs close !-->


    <div id="verticalStack">

        <div id="accordion">
        </div> <!-- accordion close !-->


        <div id="usersBox">
        </div><!-- usersBox close !-->

        <div id="displayProductButtons">
        </div> <!-- displayProductButtons close !-->

    </div>  <!-- verticalStack !-->


</div> <!-- wrapper close !-->

CSS:

body {
   margin:0;
   padding:0;
   font-family: Verdana, Times, serif;
   font-size: 12px;
   color: #333333;
   background-color: #F9F9F9;
   min-width: 944px;
}

#wrapper{
    margin:10px;
    width:90%;
}


#tabs {
    float:left;
    width:700px;
    margin-right: 10px; 
}

#verticalStack{
    float:left;
    width:400px;
    height:500px;
}

#accordion{
    float:left; 
}

#usersBox{
    width:100%;
    margin-top:10px;
    float:left;
    border:1px solid #aaa;
    border-radius:5px;
}

#display{
    margin-top:25px;
    float:left;
}

The page looks like this:

 ------------------------------------
| wrapper                            |
    -----   ------------------
|  |tabs|   |verticalStack    |      |
   -----   ------------------- 
|          |  |accordion   |  |      |
            -------------           
|          |  |usersBox    |  |      |
            -------------        
|          |  |display     |  |      |
            --------------
|          |                  |      |
            ----------------         
|-------------------------------------

When I resize the page the veritcalStack div (along with the inner divs) falls under the tabs div. Can someone please explain to me why this occurs and what I can do about it, thanks.

UPDATE 1: Added wrapper div to structure diagram

Answer 1

You're floating your elements; they will remain side-by-side as long as the horizontal space is sufficient to provide for it. If you don't want them to collapse, you should put them within a container that has an explicit width; this will create a horizontal scrollbar at some point in your resizing though.

<!-- these images will not collapse -->
<div id="container">
  <img src="http://placekitten.com/300/200" />
  <img src="http://placekitten.com/200/200" />
</div>

<!-- these images will collapse -->
<img src="http://placekitten.com/300/200" />
<img src="http://placekitten.com/200/200" />

Working Fiddle: http://jsfiddle.net/jonathansampson/EChrr/

My suggestion would be to embrace this; check out Responsive Web Design and find how to use the natural behavior of the browser to your advantage.

Answer 2

Floated elements will stay side by side until there is insufficient space (i.e in your case when the browser window is less than 1110px wide). If this is how the design must be, then you should set a width, or min-width on the #wrapper to 1110px wide.

You could also try setting the widths of the floated elements relative to the other elements (i.e using percentages) so that the design works across smaller resolutions just as well.