不正确的格式与CSS

Question

我设计一个基本的网站，在这里你可以对电脑玩剪刀石头布的HTML页面。功能完美，现在我只需要调整页面的格式。

我喜欢具有游戏的想法，再经过下一个游戏，重新启动的消息和按钮出现，并应在页面下方居中。目前，这些都显示在我的包装持有实际游戏的权利。

这里是我的htm：div和按钮都位于底部：

<div id="wrapper"> 
     <div id="left" class="column"> 
       <h2>User</h2> 
       <div id="userchoice"> 
       </div> 
     </div> 
     <div id="middle" class="column"> 
       <h2>VS.</h2> 

     </div> 
     <div id="right" class="column"> 
       <h2>Rock Paper Scissors</h2> 
       <div id="computerchoice"> 
       </div> 
     </div> 
</div> 

</br></br> 

<div> 
     <p id="result"></p> 
</div> 
</br> 
<button onclick="playAgain()" id="playagain" class="ui-button ui-widget ui-state-default ui-corner-all">Play Again?</button> 
</br> 
</br> 

和我的CSS：

body 
    { 
      text-align: center; 
      font-family: Verdana, Arial, sans-serif; 
      font-size: 1em; 
    } 
    #wrapper { 
       /*border: 2px solid black;*/ 
       width: 1015px; 
       margin-left: auto; 
       margin-right: auto; 
     } 
     #header { 
       text-align: center; 
     } 

     /* 300px content + 20px = 320px physical width per column */ 
     .column { 
       float: left; 
       width: 325px; 
       margin: 5px; 
       text-align: center; 
       min-height: 250px; 
     } 
     /* The middle column adds 4px of border to its physical width */ 
     #middle { 
       /*border-left: 2px solid black; 
       border-right: 2px solid black;*/ 
       margin-left: 0; 
       margin-right: 0; 
       padding-left: 10px; 
       padding-right: 10px; 
     } 

     /* CSS Clear Hack: apply this to the containing element. */ 
     .group:before, 
     .group:after { 
       content:""; 
       display:table; 
     } 
     .group:after { 
       clear:both; 
     } 
     .group { 
       zoom:1; /* For IE 6/7 (trigger hasLayout) */ 
     } 

我用另一个页面上这个CSS，并且其用作我想要按钮和消息在底部，所以我很困惑如何这不起作用。如果你能发现错误，或者有别的东西，我可能会尝试，请让我知道

Answer 1

添加一个明确的div来清除高度，因为你已经浮动元素。

<div id="wrapper"> 
      <div id="left" class="column"> 
        <h2>User</h2> 
        <div id="userchoice"> 
        </div> 
     </div> 
     <div id="middle" class="column"> 
       <h2>VS.</h2> 

     </div> 
     <div id="right" class="column"> 
       <h2>Rock Paper Scissors</h2> 
       <div id="computerchoice"> 
       </div> 
      </div> 
    <!-- clear here --> 
    <div class="clear" style="clear:both;"></div> 
    </div>