これらのHTMLコンポーネントをどのように整列させることができますか？

私は2つのビューを持っています.1つはログイン用、もう1つはログアウト用です。私が思うにログアウトビューはOKです：これらのHTMLコンポーネントをどのように整列させることができますか？

enter image description here

でログインした場合、ユーザーの画像が左にすぎ表示さ見ることができるように、コンポーネントは、適切に整列しない：

enter image description here

より整列したグラフィックスを実現するために必要なことを教えてください。私は、ユーザーの画像とロゴは同じに整列する必要がありますと思います。コードは次のとおりです。

<div id="header"> 
    <a id="logo" href="/" name="logo"><img src="/_/img/kool_business.png" height="80" 
    title="Koolbusiness.com" alt="Koolbusiness.com" /></a> 

    <div id="page_name" class="ctext1"> 
     <div class="ctext2"> 
      <div class="ctext3"> 
       For sale 
      </div> 
     </div> 
    </div> 

    <div id="line"></div> 
</div> 

<div id="container_main"> 
    <div class="navbar"> 
     <div style="float:left; margin-top:6px;"> 
      <img src= 
      "https://graph.facebook.com/327400016/picture?type=small" /><a href= 
      "/user/niklas-rosencrantz">Niklas Rosencrantz</a><span style= 
      "color:#99ccff">&nbsp;|&nbsp;</span><a href="/">Home</a><span style= 
      "color:#99ccff">&nbsp;|&nbsp;</span> <a href="/ai">Insert 
      ad</a><span style="color:#99ccff">&nbsp;|&nbsp;</span> <a href= 
      "/tamil_nadu">Search for ads</a><span style= 
      "color:#99ccff">&nbsp;|&nbsp;</span> <a href= 
      "/li?t=w">Wanted</a><span style="color:#99ccff">&nbsp;|&nbsp;</span> 
      <a href="/auth/logout">Log out</a> 
     </div> 
    </div> 
</div>

私はちょうどstyle:"float:left; margin-top:6px削除すべきか、何があなたは私がレイアウト存在スムーズに行うべきだと思いますか？私のページのCSSは

#header { 
    margin-left: 26px; 
    margin-top: 16px; 
    width: 790px; 
    height: 70px; 
} 
#logo, 
#page_name { 
    float: left; 
    height: 50px; 
} 
#page_name { 
    font-size: 14px; 
    vertical-align: middle; 
    width: 250px; 
} 
#logo { margin-right: 26px } 
.navbar { 
    margin: 5px 0 10px -7px; 
    overflow: hidden; 
} 
.navbar a, 
.navbar a:visited, 
.navbar a:link { 
    margin-top: 5px; 
    margin-left: 8px; 
    margin-right: 8px; 
    font-size: 14px; 
    color: #336699; 
    text-decoration: none; 
} 
.navbar a:hover { text-decoration: none } 
.navbar a:active { text-decoration: underline }

どんな答えを事前に感謝したり

出典

2011-12-10 Niklas Rosencrantz

画像はどこに表示されますか？ – jQuerybeast

質問ありがとうございます。私はレイアウトがよりスムーズになるようにして、上のlogaと同じようにしたいと思います。スコットの答えに続いてそれが働いた。 –