CODEWITHSUNDEEP
csshtml
dbuizert
dbuizert

Reputation: 75

DIV float right not working. What is wrong?

I am trying to float the timer right top across 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;

Upvotes: 0

Views: 6302

Answers (3)

bteleky
bteleky

Reputation: 1

Try to add to div header: 

float:left;

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

clear: both;

Upvotes: 0

TheTechGuy
TheTechGuy

Reputation: 17354

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.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

Upvotes: 3

Related Questions