2つのDivsが正しく整列していない問題

Question

2つのdivが親divにネストされています。

スケジュール部門と電話番号部門を正しく設定できませんでした。私は.clearとfloatタグを追加しようとしました。

がは例示であるが、私は大きなモニタでこれを表示すると、2 DIVS右

への道オフであるように見えるべき2 DIVS

http://www.virtualpetstore.com

私は浮動小数点数を右に変更しようとしましたが、相対位置にページを完全に壊す位置に変更しました。ここで

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

は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

divとfloatの順番をより簡単できれいにする方法は、rightです。だから、

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

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

そして

#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/

Answer 2

あなたのマージン503が問題です。 0