DIV float right not working. What is wrong?

I am trying to float the timer right top acro开发者_高级运维ss from the logo. but it's not working. If I use the regular style="float:right" it works perfect...

<div id="whole_page" />

            <div id="header" />
            <?php echo "$logo" ?>   
            <div id="timer" style="float:right" /><?php

            echo "$today"; 
            ?></div>
            </div>
            <div id="nav" />
            Home | 
            About | 
            Help
            </div>
            <div id="content" />
            <?php
            echo "Hello, my name is, $first_name \"$nick_name\" $last_name<br />";
            echo "I am from $city, $country<br />";
            ?>
            </div>
      </div>    

This is the css:

#whole_page {
    width:          65em;
    margin:         auto;
    padding:        0;
    text-align:     left;
    border-width:   0 1px 1px;
    border-color:   #000;
    border-styler:  solid;
}

#header {
    color:          white;
    background:     #ebebeb;
    font-size:      24pt;
    margin-bottom:  0;
    font-weight:    bold;
}

#timer {
    float:          right;
    margin-bottom:  0;
}

#nav {
    color:          #000;
    font-size:      12pt;
    font-weight:    none;
    background:     #ebebeb;
    padding:        0.5em;
    border:         none;

Usually, for a float to work, you need to set a width on the element.

(Otherwise, the browser renders the element at 100% and there is nothing to float.)

So make this

#timer{
    width:200px; //OR WHATEVER SIZE
    float:right;
    margin-bottom:0;
}

What happens when you use F12 debug? Do you see any style applied to the element? Also view the source code of of rendered page and see the actual CSS in the page. Then please post the necessary css from there to debug it.

Try to add to div header:

float:left;

If you want that a div to be in the next line just place:

clear: both;