Question

I have 2 divs nested within a parent div.

Im having a problem setting the Schedule Div and PhoneNumber Div correctly. I’ve tried adding .clear and float tags.

http://www.virtualpetstore.com

The 2 Divs should appear as is in the Illustration, but when I view this with a larger monitor, the 2 Divs are way off to the right

I’ve tried to change the floats to right, then change the position to relative which completely breaks the page.

*{ margin:0; padding:0 }
body {
    background-color: #9EB0C8;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 62.5%;
}
#top-wrap {
    height: 133px;
    margin: 0 auto;
    width: 882px;
    position: relative;
    z-index:100;
    background-color: Yellow;
}
#head-logo {
    height: 133px;
    width: 214px;
    float:left;
    position:relative;
    /*margin: 0px 0 0 58px;*/
    background: url("/images/Home/Logo7.png") no-repeat scroll 0 0 transparent;
    background-position:bottom;
    background-color: Green;
}
#head-title {
    height: 55px;
    width: 385px;
    float:left;
    position:relative;
    margin: 9px 0 0 18px;
    background: url("/images/Home/LogoTitle1.png") no-repeat scroll 0 0 transparent;
    background-color:Red;
}  
#contact-button {
    height: 28px;
    width: 165px;
    float:left;
    position:absolute;
    margin: 7px 0 0 715px;
    background-color:orange;
}
#contact-phone {
    height: 20px;
    width: 134px;
    margin: 28px 0 0 745px;
    float:left;
    position:absolute;
    color:#FFFFFF;
    font-family: Arial,Impact,Impact5,Charcoal6,sans-serif;
    font-size: 2.1em;
    text-align: right;
    background-color:Blue;
}    
a.contact {
    background-image: url("/images/Home/RapidButtonSprite4.png"); 
    background-position:left bottom; /* 0px -27px; */ 
    display: block;
    font-size: 11px;
    text-align: center;
    width: 165px;
    height: 27px;   
}
a.contact:hover {
    background-position:left top; /*0px 0px;*/
} 
#navigation-primary {
    float:left;
    position:relative;
    margin: 18px 0 0 4px;
}

Here is the Relevent HTML:

<div id="top-wrap">
    <div id="head-logo">
        <a href="/"></a>
    </div>
    <div id="head-title">
    </div>
    <div id="contact-button">
        <div id='contact-form'>
            <a class="contact" href="#"></a>
        </div>
    </div>
    <br style="clear: right" />
    <div id="contact-phone">
        703-425-6000
    </div>
    <div id="navigation-primary">
    ....
    </div>
</div>

Answer 1

The easier and cleaner way would be to switch the order of the divs and float them to the right. So

<div id="contact-button">
    <div id='contact-form'>
        <a class="contact" href="#"></a>
    </div>
</div>

<div id="head-title">
</div>

And

#head-title {
    height: 28px;
    width: 165px;
    float:right;
    margin: 0;
    background-color:Red;
}  
#contact-button {
    height: 28px;
    width: 165px;
    float:right;
    margin: 0;
    background-color:orange;
}

http://jsfiddle.net/jasongennaro/Cm7jv/1/