두 블록을 CSS와 나란히 배치하는 방법

Question

동일한 로고 (왼쪽 끝에있는 로고와 맨 오른쪽에있는 메뉴)에 로고와 보조 메뉴가 나타납니다. 로고 너비는 정의되지 않고 보조 메뉴 너비는 200 픽셀입니다.

<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> 

: 여기

#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의 관련 부분이다 : 나는 다음과 같은 CSS를 적용하면, 보조 메뉴 (페이지의 오른쪽에 여전히하지만) 로고 아래 라인에 밀려

내가 잘못하고있는 것에 대해 어떤 생각이라도 고맙게 생각합니다.

Answer 1

#logo 그러면 아마 clearfix class'd 용기로 모두 .secondardMenu 후 clear: both 스타일 컨테이너를 추가하거나 포장해야 float: left

에 필요