Q:

 elements are displayed inline when I float them to the right? 

Basically, I have two  elements on my page, and when I float both of them to the right using float:right; they are displayed next to each other (inline) instead on top of each other (block).   
This is the CSS for the first  element:
div#upgradeInfo{
    border: 2px solid white;
    float:right;
    padding:10px;
    font-size: 100%;
}

And this is the CSS for the second one.  
div#safeTimer{
    border: 2px solid white;
    float:right;
    padding: 10px;
}

And here is the representation of what exactly happens :

The two div's that I'm talking about are the boxes on the bottom right. 
How do I display them on top of each other? 
I tried doing display:block on both of them (and on each one individually)  but that doesn't seem to help. 
I can achieve this easily using absolute positioning, but doesn't look good on all screens. 
Any solutions? 
Thanks. 

A:

One solution would be to enclose them both in a single div, which you then float to the right. 
HTML:
<div id="rightCol">
    <div id="safeTimer">...</div>
    <div id="upgradeInfo">...</div>
</div>

CSS:
#rightCol { float: right; }

