왼쪽 여백이 무시되고 있습니다

Question

연락처와 면책 조항 div가 왼쪽 여백을 무시하는 이유를 알아 내려고하고 있습니다.

http://jsfiddle.net/RLdYC/4/

HTML :

<!-- Package 1 --> 
<div class="package2"> 
    <div class="pkgtop">    
     <div class="pkgtype"> <span id="ratings">SINGLE PANEL</span> </div> 
     <div class="pkgcost"><sup class="dolladollabill">$</sup><span id="cost">4,100</span></div> 
     <center><div class="pkglength">PER FOUR WEEKS</div></center> 
    </div> 

    <div class="pkgbottom"> 
    <div class="pkgselect"><a href="#">Select Plan</a></div> 
     <ul class="pkgdesc"> 
      <li><span id="panelnum">1</span> Panels</li> 
      <li><span id="impressions">400K</span> Impressions</li> 
      <li>Reach: <span id="reach">15.2%</span> </li> 
     </ul> 
    </div> 
</div>          
<div class="contact">why are you ignoring the left margin?</a></div> 
<div class="disclaimer">disclaimer</div>       

Answer 1

을 토르 파이어 폭스 또는 방화 광에서 15의 ​​여백이 연락처 div에 적용되는 것을 볼 수 있습니다. 그러나 여백이있는 연락처 div의 왼쪽 절반은 떠 다니는 package2 div 뒤에 숨겨져 있고 연락처 div의 텍스트는 그냥 밀려났습니다.

전체 div를 package2 div 옆에 배치하려면 Micallef가 제안한대로 수행하고 문의/면책 조항 div에 float:left을 사용하십시오.

보기 너비가 충분하지 않을 때 문의/면책 조항을 패키지 2 아래로 떨어 뜨리지 않으려면 테이블 레이아웃 (display:table-row, display:table-cell)을 사용하도록 변경할 수도 있습니다.

.package-row { 
    display: table-row; 
} 

.package2 { 
    ... 
    display: table-cell; 
} 

.contact { 
    ... 
    display: table-cell; 
} 

.disclaimer { 
    ... 
    display: table-cell; 
} 

http://jsfiddle.net/AJw7x/1/

Answer 2

이 문제를 해결할 수 float:left 추가 - 당신이 INSPEC를 사용하여 레이아웃을 검사하는 경우 jsfiddle

.contact{ 
    margin-left:15px; 
    color:#000; 
    font-size:16px; 
    line-height:16px; 
    height:auto; 
    float:left; 
} 

.disclaimer{ 
    margin: 15px 15px 15px 15px; 
    color:#939292; 
    line-height:15px; 
    font-size:14px; 
    height:auto; 
    float:left; 
}