2つのDIVを中央と右に横並びにしたい

質問

いつも大変お世話になっております。
wordpressのヘッダー個所に、真ん中にロゴ画像、右手にソーシャルメディアの画像を横並びに配置したいのですが、うまくいきません。
Topというdivの中に「logo」と「social」という２つのdivを入れ、下記のcss、htmlで制作すると、ロゴは中央に配置され、ソーシャルメディアの画像は右に寄るのですが、
横の配置がソーシャルメディア画像が右下にきてしまい、うまくいきません。
是非どなたかご教授いただけますと、非常に助かります。

<div id="top">
<div id="logo"></div>
<div id="social">
<div class="fb"></div>
<div class="twitter"></div>
</div>
</div>

#top {
height: 36px;
}
#logo {
background-image: url(images/logo.png);
background-repeat: no-repeat;
margin: 0 auto;
height: 36px;
width: 397px;
}

#social {
float:right;
height: 36px;
width:56px;
}
#social .fb {
background-image: url(images/fb.png);
background-repeat: no-repeat;
padding-right: 3px;
height: 26px;
width: 25px;
float:right;
}
#social .twitter {
background-image: url(images/twitter.png);
background-repeat: no-repeat;
padding-right: 3px;
height: 26px;
width: 25px;
float:right;
}

回答No.2

ORUKA1951 · ベストアンサー

HTMLの中身が無いので？？？なのですが、
＞Topというdivの中に「logo」と「social」という２つのdivを入れ、

<div id="top">
　　<div id="logo">ロゴ</div>
　　<div id="social">
　　　<div class="fb">ソーシャルメディアの画像</div>
　　　<div class="twitter">ツイッターの画像</div>
　　</div>
</div>
うーん、これじゃ検索エンジンは無論、画像を読み込まないブラウザ、スタイルシートを読まないブラウザにはチンプンカンプン。
　この場合、背景にする必要はありません。きちんと文書構造にしたがってマークアップしましょう。
　タブは＿に置換してある。

<div class="header" id="Top">
＿<h1><img src="images/logo.png" width="397" height="36" alt="タイトル(ページの見出し)"></h1>
＿<div class="nav">
＿＿<ul>
＿＿＿<li><img src="images/fb.png" width="25" height="26" alt="FB"></li>
＿＿＿<li><img src="images/twitter.png" width="25" height="26" alt="Twitter"></li>
＿＿</ul>
＿</div>
<div>
文字がちゃんとあり、その背景なら
<div class="header" id="Top">
＿<h1><span>タイトル(ページの見出し)</span></h1>
＿<div class="nav">
＿＿<ul>
＿＿＿<li>FB</li>
＿＿＿<li>Twitter"</li>
＿＿</ul>
＿</div>
<div>
ですかね。HTML的には大差ない。
[CSS]
div.header{
position:relative; /* absoluteの基準になる */
width:453px;margin:0 auto;
}
div.header h1{
margin:0 56px 0 0;
background-image:url(images/logo.png);
text-align:center;
}
div.header h1 span{visibility:hidden;}

div.header div.nav{
width:56px;
position:absolute;
top:0;right:0;
}
div.header div.nav ul,
div.header div.nav ul li{
display:block;list-style:none;
margin:0;padding:0;
}
div.header div.nav ul{
width:100%;height:36px;
}
div.header div.nav ul li{
padding-right:3px;
background:url(images/fb.png) no-repeat;
width:25px;height:26px;
float:left;
}
div.header div.nav ul li+li{
background-image:url(images/twitter.png);
}

デザインは一切考慮せず、HTMLをきちんと書くこと。そうすれば先でどのようにもデザインは変更できます。HTMLさえきちんとしていたら、違うHTMLでも同じになる。

★headerをrelativeにしておいて、それを基準にabsoluteで配置すると、デザインに引っ張らずHTMLがかけます。そして、そのHTMLは、好きにデザインできます。

お礼

ORUKA1951様、

ご回答誠にありがとうございました。
<img src=...>を使用してイメージ挿入ができず、イメージを背景として入れておりました。
ご指摘頂きました通り、SEO対策も考慮してimgを背景としてではなく取り込むことにしました！

ご丁寧なご回答で非常によく理解できました。
ありがとうございます

回答No.1

szk9998

全体でどういったページをイメージしているのがわかりませんので、ひとつだけアドバイスです。

#logo
に
float:left;
を入れたら、とりあえずは#socialで行がえしなくなります。

そういうことでなかったらスルーしてください。

お礼

ご回答ありがとうございます。
もう一人の方の方法で無事に解決することができました。