yjeYoooeug
New Member
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:\[code\]<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>\[/code\]and my css:\[code\] 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) */ }\[/code\]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