title: How can I align these HTML components?
body: <p>I've got 2 views, one for logged in and one for logged out. The logged out view I think is OK:</p>
  
  <p><img src="https://i.stack.imgur.com/ALk8X.png" alt="enter image description here"></p>
  
  <p>When logged in, the components do not align properly, as can be seen the user picture displays too far to the left:</p>
  
  <p><img src="https://i.stack.imgur.com/waGUq.png" alt="enter image description here"></p>
  
  <p>Can you tell me what I need to do to achieve more aligned graphics? I think the user picture and the logo should be aligned the same. The code is:</p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;a id="logo" href="/" name="logo"&gt;&lt;img src="/_/img/kool_business.png" height="80"
      title="Koolbusiness.com" alt="Koolbusiness.com" /&gt;&lt;/a&gt;
  
      &lt;div id="page_name" class="ctext1"&gt;
          &lt;div class="ctext2"&gt;
              &lt;div class="ctext3"&gt;
                  For sale
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="line"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="container_main"&gt;
      &lt;div class="navbar"&gt;
          &lt;div style="float:left; margin-top:6px;"&gt;
              &lt;img src=
              "https://graph.facebook.com/327400016/picture?type=small" /&gt;&lt;a href=
              "/user/niklas-rosencrantz"&gt;Niklas Rosencrantz&lt;/a&gt;&lt;span style=
              "color:#99ccff"&gt;&amp;nbsp;|&amp;nbsp;&lt;/span&gt;&lt;a href="/"&gt;Home&lt;/a&gt;&lt;span style=
              "color:#99ccff"&gt;&amp;nbsp;|&amp;nbsp;&lt;/span&gt; &lt;a href="/ai"&gt;Insert
              ad&lt;/a&gt;&lt;span style="color:#99ccff"&gt;&amp;nbsp;|&amp;nbsp;&lt;/span&gt; &lt;a href=
              "/tamil_nadu"&gt;Search for ads&lt;/a&gt;&lt;span style=
              "color:#99ccff"&gt;&amp;nbsp;|&amp;nbsp;&lt;/span&gt; &lt;a href=
              "/li?t=w"&gt;Wanted&lt;/a&gt;&lt;span style="color:#99ccff"&gt;&amp;nbsp;|&amp;nbsp;&lt;/span&gt;
              &lt;a href="/auth/logout"&gt;Log out&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Should I just remove the <code>style:"float:left; margin-top:6px</code> or what do you think I should do the present the layout smoother? The CSS for my page is</p>
  
  <pre><code>#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 }
  </code></pre>
  
  <p>Thanks in advance for any answer or comment</p>