горизонтально выравнивающие элементы в отдельных divs

Question

У меня есть 3 элемента (логотип, nav, social icons), все в разных div s, которые мне нужно выровнять по горизонтали. Я пробовал различные комбинации float, clear, padding, margin и т. Д., И ничего, похоже, не работает правильно. Что мне не хватает?

live site fiddle

HTML

<div id="header"> 
     <a class="logo" href="#"><img src="<?php bloginfo('template_url');?>/img/logo.png" alt="logo" /></a> 
     <nav> 
      <?php wp_nav_menu(array('menu' => 'nav')); ?> 
     </nav><!-- end nav --> 

    </div><!-- end header --> 
<div id="sidebar"> 
    <div class="social"> 
     <ul> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/instagram.png" alt="instagram" /></a> 
       <ul> 
        <li><a href="http://instagram.com/#/">a</a></li> 
        <li><a href="http://instagram.com/#/">b</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/youtube.png" alt="youtube" /></a> 
       <ul> 
        <li><a href="http://www.youtube.com/user/#">a</a></li> 
        <li><a href="http://www.youtube.com/user/#">b</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/facebook.png" alt="facebook" /></a> 
       <ul> 
        <li><a href="http://www.facebook.com/#">a</a></li> 
        <li><a href="http://www.facebook.com/#">b</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/twitter.png" alt="twitter" /></a> 
       <ul> 
        <li><a href="https://twitter.com/#">a</a></li> 
        <li><a href="https://twitter.com/#">b</a></li> 
       </ul> 
      </li> 
      <li><a href="#"><img src="<?php bloginfo('template_url');?>/img/lockerz.png" alt="lockerz" /></a> 
       <ul> 
        <li><a href="http://lockerz.com/u/#">a</a></li> 
        <li><a href="http://lockerz.com/u/#">b</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div><!-- end social --> 

CSS

#header { 
    height: 40px; 
    padding-bottom: 40px; 
    padding-top: 80px; 
    vertical-align: middle; 
    width: 700px; 
} 

#header .logo { 
    display: block; 
    float: left; 
    width: 285px; 
    height: 40px; /*added*/ 
} 

#header .logo:hover { 
    background: url('img/logo_hover.png') no-repeat; 
} 

#header .logo img { 
    display: block; 
} 

#header .logo:hover img { 
    display: none; 
} 

#header nav { 
    clear: both; 
    float: right; 
    padding-left: ; 
    padding-top: 10px; 
} 

#header nav ul li { 
    display: inline; 
} 

#header nav ul li a { 
    color: #333333; 
    font-family: amatic; 
    font-size: 150%; 
    padding-right: 25px; 
} 

#header nav ul li a:hover { 
    color: #c6e000; 
} 

#header nav ul li a:last-child { 
    padding-right: none; 
} 

#header nav .current-menu-item a { 
    color: #c6e000; 
} 

/* Sidebar */ 

#sidebar { 
    clear: both; 
    float: right; 
    width: 230px; 
} 

#sidebar .social { 
    float: right; 
    list-style: none; 
    padding-bottom: 20px; 
    padding-top: 20px; 
    margin-right: 23px; 
} 

#sidebar .social ul { 
    position: relative; 
} 

#sidebar .social ul li { 
    display: inline-block; 
} 

#sidebar .social ul li ul { 
    display: none; 
    padding: 0; 
} 

#sidebar .social ul li a { 
    display: inline; 
    padding-left: 6px; 
    font-size: 75%; 
    white-space: nowrap; 
} 

#sidebar .social ul li:hover ul { 
    display: block; 
    position: absolute; 
} 

#sidebar .social ul li:hover ul li { 
    background: #c6e000; 
    display: block; 
    text-align: right; 
} 

Answer 1

В качестве альтернативы плавающему содержимому вы можете использовать позиционирование для перемещения боковой панели справа от содержимого.

Делая следующие изменения, вы бы иметь больше контроля над тем, где элементы расположены, как и position:absolute означает:

позиционировать его на заданном положении по отношению к его ближе расположенного предка или содержащий его блок.

от MDN documentation.

Таким образом, давая #container a position позволяет абсолютное позиционирование элементов внутри этот контейнер.

#container { 
    margin: 80px auto 0; /* move the 80px padding from the content to the whole container */ 
    position: relative; /* enables absolute position to work */ 
} 

#header { 
    padding-top: 80px; /* remove */ 
} 

#sidebar { 
    clear: both;   /* remove */ 
    float: right;  /* remove */ 
    margin-top: -83px; /* remove */ 
    width: 230px;  /* keep */ 
    position: absolute; /* add absolute positioning */ 
    right: 0;   /* on the right */ 
    top: 0;    /* at the top */ 
} 

Answer 2

Чтобы получить панель навигации выстраиваться с логотипом

#header nav - remove clear:both; 

Для боковой панели

Добавить

#sidebar {margin-top:-114px; } 

Это Hacky решение для социальных иконок. Вероятно, стоит увеличить ширину заголовка и добавить социальные кнопки в div заголовка.

Answer 3

Вы должны вложить потоки div внутри заголовка, тогда вы можете манипулировать боковой панелью, чтобы выровнять ее с заголовком.

Также удалите прозрачный: оба; от #header nav