jquery - 如何修复在jsp中调整窗口大小时div下降的问题

Question

我正在使用 jquery animate 开发类似以下匹配的游戏。它的工作正常，符合我的预期。但我的问题是，我在两个 div 中显示问题和选项，如下代码所示，

    <div align="center">
    <div id="first" class="nav nav-justified">      
         <label id="Cat" class="dropzone">Cat</label><br><br><br>
         <label id="Snake" class="dropzone">Snake</label><br><br><br>
         <label id="Cow" class="dropzone">Cow</label><br><br><br>
     </div>
        <div id="second">
            <label id="Cow" class="item"  name="Milk">Milk</label><br><br><br>        
             <label id="Cat" class="item"  name="Rat">Rat</label><br><br><br>  
              <label id="Snake" class="item"  name="Eagle">Eagle</label><br><br><br>  
     </div>
 </div> 

然后使用下面的CSS进行对齐，

#first {

    float:left; /* add this */

    height: 350px;
     padding-left: 150px;
}
#second {

   float:left;
     height: 350px;
     padding-left: 250px;
}

当我调整窗口大小时，第二个 div 自动下降并进行无序对齐。

这是我的问题:http://jsfiddle.net/Manivasagam/z4aLva34/27/

我对 css 不太了解。希望有人告诉我如何解决这个问题？

更新:我希望显示如下图所示，

Answer 1

添加一个容器 div，其周围有一个宽度(或min-width)。

.container {width: 400px; border: 1px solid #f00}

工作 DEMO

为了演示，我刚刚向该容器 div 添加了边框。