2つのブロックをCSSで並べる方法

Question

私はロゴと同じ行に表示したいセカンダリメニュー（左端のロゴと右端のメニュー）を持っています。ロゴの幅は未定義で、セカンダリメニューの幅は200ピクセルです。私は、以下のCSSを適用すると、二次メニューが（それでもページの右側にある）ロゴの下の行にプッシュされます。ここでは

#logo { 
padding-bottom: 40px; 
} 

.secondaryMenu { 
width: 200px; 
float: right; 
margin-right: 0px; 
padding-right: 2px; 
color: black; 
font-size: 9px; 
letter-spacing: 1px; 
text-align: right; 
} 

は、HTMLの関連する部分である：

<div id="logo"> 
    <a href="index.html"> <img id="logoimg" border="0" alt="" src="images/logo.gif"/> </a>   
</div> 
<div class="secondaryMenu"> 
    <a href="about.html">About</a> | <a href="services.html">Services</a> | 
    <a href="contactus.html">Contact Us</a> 
</div> 

私が間違っていることについて、私はどんな考えにも感謝します。

Answer 1

#logoは、あなたはおそらくclearfix class'dコンテナでそれらの両方を.secondardMenu後clear: bothスタイルのコンテナを追加したり、ラップする必要がありfloat: left

する必要があるだろう