CSS 레이아웃 문제

-2

내 Right-nav div가 CSS의 모든 것에 응답하지 않는 이유가 궁금합니다.CSS 레이아웃 문제

HTML :

<body> 
    <div id="header">Header</div> 
    <div id="main-wrap"> 
     <div id="sidebarwrap"> 
     <div id="nav">Left Nav</div> 
      advertisment pictures 
     </div> 
    <div id="content-wrap"> 
     <div id="picture-wrap"> 
     <div class="info">Picture</div> 
     </div> 
      <div id = "Content"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div> 
      <div class ="Right-nav"><p>right-nav</p></div> 
     </div> 
    </div> 
    <div id="footer">Footer</div> 
</body>

CSS : 당신은 하나 또는 다른에 HTML의 class하지만, CSS의 id를 div에 오른쪽 변경을 모두 부여했기 때문에

/** 
* custom layout 
*/ 

#header, 
#footer { 
    background-color: #f1f1f1; 
    width: 60%; 
    margin: 0 auto; 
} 

#main-wrap { 
    background-color: #D9D9D9; 
    width: 60%; 
    margin: 0 auto; 
} 

#sidebar { 
    background-color: #d2d2d2; 
} 

#content-wrap { 
    background-color: #c5c5c5; 
} 

.info { 
    background-color: #DDD; 
} 
.info + .info { 
    background-color: #e6e6e6 
} 


/* sizes */ 
#main-wrap > div { 
    min-height: 450px; 
} 


#header, 
#footer { 
    min-height: 40px; 
} 

.info { 
    min-height: 80px; 
} 

/* layout */ 

#main-wrap { 
/* overflow to handle inner floating block */ 
    overflow: hidden; 
} 

#sidebarwrap { 
    float: left; 
    width: 30%; 
    overflow:hidden; 
    background-color:blue; 
} 

#nav{ 
    min-height: 80px; 
    background-color: red; 
} 

#content-wrap { 
    float: right; 
    width: 70%; 
    overflow:hidden; 
    background-color:blue; 
} 

#Content{ 
    float:left; 
    width:40%; 
    min-height:370px; 
    background-color:red; 
} 

#Right-nav{ 
    background-color:red; 
} 

#picture-wrap { 
/* overflow to handle inner floating block */ 
    overflow: hidden; 
} 

.info { 
    width:100%; 
    float: left; 
}

출처

2012-12-17 Austin Davis