在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.Hope有人告诉我如何解决这个问题？

更新：我想要显示如下图像

Answer 1

添加一个容器div，您的货币对周围有width（或min-width。

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

正在使用 DEMO

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

Answer 2

这是因为你有padding-left: 250px

而不是这个我添加了

text-align:left和float:right

检查here。

Answer 3

由于padding-left: 250px元素#second而发生这种情况。删除它并将padding-right: 250px;提供给#first元素。

<强> Working Fiddle