왜이 두 레이어가 서로 옆에 떠 다니지 않습니까?

Question

나는 서로 옆에 두 개의 div 디스플레이를 만들려고하고 있는데, 나는 심지어 그것들을 아무런 운이 없게 떴다. 왜 그런가요?

<div class="popup-container"> 
    <div class="popup-header"> 
     <div class="popup-image-holder"></div> 

    <div class="image-titles">Content for class "image-titles" Goes Here</div> 
    </div> 
</div> 


.popup-container { 
    padding: 0px; 
    width: 764px; 
} 
.popup-header { 
    background-color: #000; 
    padding: 21px; 
    height: 243px; 
    width: 100%; 
    overflow: hidden; /* add this to contain floated children */ 
} 
.popup-image-holder { 
    float; left; 
    background-color: #FFF; 
    height: 165px; 
    width: 165px; 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    -khtml-border-radius: 3px; 
    border-radius: 3px; 
    padding-top: 5px; 
    padding-left: 5px; 
} 
.image-titles { 
    float: left; 
    height: 100%; 
    width: 300px; 
    background-color: #666; 
} 

감사 편집 : JsFiddle

Answer 1

흠. 너는 잘못 입력했다. 대신 : popup-image-holder이

.popup-image-holder { 
float: left; 
background-color: #FFF; 
height: 165px; 
width: 165px; 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
-khtml-border-radius: 3px; 
border-radius: 3px; 
padding-top: 5px; 
padding-left: 5px; 
} 

바이올린을 here

Answer 2

Display (디스플레이) 최소한의 외부 대부분의 컨테이너 속성을 설정하십시오.

예 : .popup-container { display: block; padding: 0px; width: 764px; } 필요에 따라 다른 요소에 추가하십시오.