어떻게 이러한 HTML 구성 요소를 정렬 할 수 있습니까?

나는 2 개의보기가 있는데, 하나는 로그인 한 것이고 다른 하나는 로그 아웃 한 것입니다. 내가 생각하는 로그 아웃보기는 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에 맞춰 레이아웃을 더 부드럽게하고 싶습니다. 스콧의 대답에 따르면 그것은 효과가 있었다. –