Improper formatting on an HTML page with CSS

Question

I am designing a basic site where you can play rock paper scissors against the computer. The functionality is working perfectly, now I just need to tweak the format of the page.

I like the idea of having the game, and then underneath after a game, a message and button to restart appear, and should be centered under the page. Currently, these are being displayed to the right of my wrapper holding the actual game.

Here's my htm: the div and button are located at the bottom:

<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>

and my 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) */
        }

I've used this css on another page, and it functions as I want for the button and message at the bottom, so I'm quite baffled about how this isn't working. If you can spot an error or have something else I might try please let me know

Answer 1

Add a clear div to clear the height since you have floated elements.

   <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>