Div가 예상대로 정렬되지 않았습니다.

Question

here에서 작업하려고하는 사이트를 방문 할 수 있습니다.

기본적으로 오른쪽 아래 상자의 오른쪽 상자와 같은 레이아웃을 얻으려고하고 있지만 어떤 이유로 오른쪽으로 떠오르게 할 수 없습니다. 내가 여기서 누락 된 것이 있습니까? 내 코드는 위쪽 상자에서 작동하지만 아래쪽 상자에서는 작동하지 않기 때문에 견딜 수 없습니다.

다음은 HTML입니다.

<div id="menu-ad"> 
     <div> 
      <p class="titles">Our Fare</p> 
      <p id="ad">Our lunch and dinner menus feature European inspired comfort food accompanied by an extensive bar.</p> 
      <a href="#" id="button">VIEW MENU</a> 
     </div> 
    </div><!--end menu ad--> 

    <div id="hours"> 
     <div> 
     </div> 
    </div><!--end hours--> 
</div><!--end container--> 

그리고 CSS.

/*menu ad*/ 

div#menu-ad { 
    position: relative; 
    margin-right: -11px; 
    margin-top: -11px; 
    width: 268px; 
    height: auto; 
    float: right; 
    padding: 11px 11px 10px 10px; 
    border-left: 2px solid #b9aea3; 
    border-bottom: 2px solid #b9aea3; 
    overflow: hidden; 
} 

div#menu-ad div { 
    background: #f9f4df; 
    padding: 1.9rem 4rem 2.5rem 2.5rem; 
    height: 200px; 
    display: inline-block; 
} 

.titles { 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 2.5rem; 
    color: #d6832e; 
} 

#ad { 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 1.6rem; 
    line-height: 1.35; 
    color: #4f4d4b; 
    margin-top: .5rem; 
    width: auto; 
} 

a#button { 
    padding: .6rem 1.3rem .6rem 1.3rem; 
    font-family: "Montserrat", "Helvetica", sans-serif; 
    font-size: 1.8rem; 
    color: #fff; 
    background: #d6832e; 
    text-align: center; 
    vertical-align: middle; 
    text-decoration: none; 
    position: absolute; 
    float: left; 
    bottom: 3.5rem; 
} 

/*hours*/ 

div#hours { 
    position: relative; 
    margin-right: -11px; 
    margin-top: 11px; 
    width: 268px; 
    height: auto; 
    float: right; 
    padding: 11px 11px 10px 10p; 
    border-left: 2px solid #b9aea3; 
} 

div#hours div { 
    background: #f9f4df; 
    padding: 1.9rem 4rem 2.5rem 2.5rem; 
    height: 150px; 
    display: inline-block; 
} 

어떤 도움을 주셔서 감사합니다! 그것은 아마도 단순한 것이고 단지 신선한 쌍둥이가 필요합니다.

Answer 1

당신은 당신이

padding: 11px 11px 10px 10p; 

당신은 끝에 'X'가 누락

div#hours 

의 스타일 규칙에 따라 오타,

을 갖고있는 것 같다. 어느 패딩 규칙이 정렬을 해결하지만, 높이가 지금되지 않을 수도 이제

적용되지 않는 의미,하지만 난