소셜 버튼을 내비게이션의 나머지 부분과 어떻게 정렬합니까?

Question

내 소셜 버튼 (facebook // twitter)을 나머지 내 머리글 & 탐색에 맞춰야했습니다. 나는 벽에 머리를 치고 모든 것을 일렬로 만들어주는 해결책을 찾는 것처럼 보이지 않습니다. 신선한 눈을 원하면 도움이 될 것입니다. 내 현재 코드의 jsFiddle을 만들었습니다. http://jsfiddle.net/yZ4sm/ 오른쪽에있는 두 개의 깨진 이미지 (jsFiddle의 이미지)가 오른쪽으로 정렬되어 있지 않은 것처럼 보입니다.

나는

아래 내 HTML & CSS 참조 this처럼 보이게 최종 결과를 싶습니다

HTML

<div id="headerWrapper"> 

    <div id="headerContent"> 

     <div id="grappleAnchor"> 
      <a href="index.html"> <img id="grappleAnchorLogo" src="img/grapple-logo.png" alt=" "> </a> 
     </div> 


     <div id="navigation"> 
      <div class="navigationLink"> 
       <a class="activeLink" href="index.html">Home</a> 
       <div id="navigationMarker"> 
       </div> 
      </div>   
      <div class="navigationLink"> 
       <a href="services.html">Services</a> 
      </div> 
      <div class="navigationLink"> 
       <a href="#">About</a> 
      </div> 
      <div class="navigationLink"> 
       <a href="#">Blog</a> 
      </div> 
      <div class="navigationLink"> 
       <a href="#">Contact</a> 
      </div> 
     </div> 

     <div id="social"> 

      <div id="facebook"> 
       <a href="http://www.facebook.com/GrappleConsulting" target="_blank"> <img class="greydout" src="icons/facebook.png" alt=" "> </a> 
      </div> 

      <div id="twitter"> 
       <a href="http://twitter.com/blair_gorrell" target="_blank"> <img class="greydout" src="icons/twitter_bird.png" alt=" "> </a> 
      </div> 
     </div> 

    </div>​ 

CSS

#headerWrapper { 
    background-color: #e6e4e4; 
    height:5em; 
} 

#headerContent { 
    height:80px; 

    margin: 0 auto; /*top, right, bottom, left*/ 
    padding: 0px 0; /*top&bottom, left&right */ 
    width: 955px; 
} 


/*---------->Logo Start<----------*/ 

    #grappleAnchor { 

     clear:none; 
     float:left; 
     margin: 0; 
     padding: 0; 
    } 

    #grappleAnchor a { 
     display: block; 
     float:left; 
     text-decoration: none; 
    } 

    #grappleAnchorLogo { 
     height: 70px; 
    } 

    #grappleAnchor a img { 
     border: none; 
    } 

/*---------->Logo End<----------*/ 


/*---------->Navigation Start<----------*/ 

#navigation { 
    line-height: 5em; 
} 

#navigation a:hover, #navigation a:active, #navigation a.activeLink { 
    color: #FFF; 
} 

#navigation a { 
    color:#000; 
    margin: 0 1em 0 1em; /*top, right, bottom, left*/ 
    text-decoration: none; 
} 

div.navigationLink { 
    float:left; 
    font-size: 1.4em; 
} 

#navigationMarker{ 
    border-bottom: #FFF solid 0.8em; 
    border-top: none; 
    border-left: transparent solid 0.8em; 
    border-right: transparent solid 0.8em; 
    height: 0; 
    margin-top: -0.7em; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    width: 1px;  
} 

/*---------->Navigation End<----------*/ 


/*---------->Social Start<----------*/ 

#social { 
    float:left; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 

} 

#facebook, #twitter{ 
    background-color: #fff; 
    border-radius: 20px; 
    display: block; 
    float: left; 
    height: 32px; 
    margin: 0 .5em 0 .5em; /*top, right, bottom, left*/ 
    -webkit-border-radius: 20px; 
    width: 32px;  
} 

.greydout{ 
    -moz-opacity: 0.25; 
    opacity: 0.25; 
    -webkit-opacity: 0.25; 
} 

.greydout:hover { 
    -moz-opacity: 1; 
    opacity: 1; 
    -webkit-opacity: 1; 
} 

Answer 1

마진을 사용해보십시오 없습니다 :

#social { 
    float:left; 
    margin-top: 1.5em; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;  
}