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

Can you add this to a jsfiddle? The code looks like it got a little mangled in the copy-paste. — Chris Herbert, Dec 07 '12 at 23:31
@Muleskinner Chris is right. I just fixed that. did not see that initially — ZAX, Dec 07 '12 at 23:40
You might use a clearfix technique to fix the height of the wrapper container (holding floated divs). Add class="clearfix" to the wrapper and use css from ie this http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best — jtheman, Dec 07 '12 at 23:45

score 1 · Accepted Answer · answered Dec 07 '12 at 23:44

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>

answered Dec 07 '12 at 23:44

Christopher Marshall

10,678
10
55
94

thought my css clear hack would take care of that too, but I guess not. Thank you! – ZAX Dec 07 '12 at 23:47
I typically declare a .clear {clear:both;} class at the top of my style sheet where I define global styles. That way it's super fast just to call it and be done :} – Christopher Marshall Dec 07 '12 at 23:48

Improper formatting on an HTML page with CSS

1 Answers1