html - 他の中央の div の隣に div を追加します

Question

中央に配置されている他のdivの右側にdivを追加したい。イメージに示すように:

私はこれまでにこのhtmlを持っています：

<div id= "top-menu-wrapper">
  <div id="top-menu">       
  </div>
  <div id="social">
  </div>
</div>

CSS:

#header #top-menu {
    display           : inline-block;
    width             : 764px;
    height            : 55px;
    margin            : auto;   
}

#header #social {
    display           : inline-block;
    width             : 100px;
    height            : 55px;   
    margin-left       : 25px;

}

#header #top-menu-wrapper {
    display           : block;
    text-align        : center;
    margin-bottom     : 25px;
}

Answer 1

インライン ブロックを使用してボックスを表示するため、親は :text-align:center;を持つことができ、2 番目のボックスには独自の幅の負のマージンがあり、最初のボックスを中央に引っ張ることができます。

http://codepen.io/gcyrillus/pen/ADsEx

ボックスが立っている場所を示すために背景色が使用され、水平方向の中心を視覚的に確認するために定規が追加されます。

#top-menu {
  display           : inline-block;
  width             : 764px;
  height            : 55px;
  background        : green;
}

#social {
  display           : inline-block;
  width             : 100px;
  height            : 55px; 
  margin-right      : -100px; 
  background        : yellow;
}

#top-menu-wrapper {
  text-align        : center;
  min-width         : 990px;
  background        : purple;
}
div {
  vertical-align    : top;
  padding           : 5px 0;
}
.ruler {
  width             : 50%;
  background        : red;
  margin            : 5px 0 ;
}

このように、親の幅を気にする必要はありません。その場合、min-width: 十分な幅を適用できます。

別の解決策は、ボックス 2 の同じ幅の擬似を追加することです。 http://codepen.io/gcyrillus/pen/hipBl

body {
  padding           : 2em;
  margin            : 0;
}
#top-menu {
  display           : inline-block;
  width             : 764px;
  height            : 55px;
  background        : green;
}

#social, #top-menu-wrapper:before {
  display           : inline-block;
  width             : 100px;
  height            : 55px; 
  background        : yellow;
}
#top-menu-wrapper:before {
  content           : '';
  height            : 0;
}
#top-menu-wrapper {
  text-align        : center;
  min-width         : 990px;
  background        : purple;
}
div {
  vertical-align    : top;
  padding           : 5px 0;
}
.ruler {
  width             : 50%;
  background        : red;
  margin            : 5px 0 ;
}