CSSは一部の部分を適用しません

Question

HTML：http://pastebin.com/ZQr99cnrから始まったばかりで、なぜ、.main-partが底面に当てはまるのか不思議です。また、適用される.bottom-partからの唯一のものはtext-align：centerです。他のすべては無視されるようです。

body { 
 
color: #330000; 
 
border-style: solid; 
 
border-color: black; 
 
border-width: 1px; 
 
background-color: #ffffcc; 
 
margin-left: -450px; 
 
family-font: Verdana; 
 
width: 900px; 
 
height: 420px; 
 
position: fixed; 
 
left: 50%; } 
 
    
 
.jake-cofee-shop { 
 
height: 50px; 
 
margin-bottom: 0px; 
 
margin-top: 0px; 
 
padding-top: 10px; 
 
background-color: #ccaa66; 
 
text-align:center; } 
 
    
 
.left-part { 
 
float: left; 
 
width: 200px; 
 
height: 300px; 
 
margin-left:-1px; 
 
background-color: #E8D882; } 
 
    
 
.right-part { 
 
float: right; 
 
width: 700px; 
 
height: 300px; 
 
margin-right: -1px; 
 
background-color: #f1e8b0; } 
 
    
 
.main-part { 
 
border-style: solid; 
 
border-color: black; 
 
border-width: 1px; 
 
background-color: #f1e8b0; } 
 
    
 
h4 { 
 
padding-left: 12px; } 
 
    
 
h5 { 
 
padding-left: 12px; } 
 
    
 
li { 
 
padding-left: 12px; } 
 
    
 
.image-perfection { 
 
float: right; 
 
margin-right: 25px; 
 
margin-top: 75px; } 
 
    
 
.bottom-part { 
 
height: 60px; 
 
background-color: #ccaa66 
 
; 
 
text-align: center; 
 
border-style: solid; 
 
border-color: black; 
 
border-width: 1px; } 
 

 
<h1 class="jake-cofee-shop">Jake's Cofee Shop</h1> 
 
    
 
<div class="main-part"> 
 
<div class="left-part"> 
 
<h4><a href="#">Home</a></h4> 
 
<h4><a href="#">Menu</a></h4> 
 
<h4><a href="#">Music</a></h4> 
 
<h4><a href="#">Jobs</a></h4> 
 
</div> 
 
    
 
<div class="right-part"> 
 
<h5>Come in and experience...</h5> 
 
<img class="image-perfection" width="250em" src="http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2012/04/White%20Coffe%20Cup%20With%20Beans-720x405.jpg"></img> 
 
    
 
<ul> 
 
<li>Specialty Coffee and Tea</li> 
 
<li>Freshly made sandwiches</li> 
 
<li>Bagels, Muffins, and Organic Snacks</li> 
 
<li>Music and Poetry Readings</li> 
 
<li>Open mic nights</li> 
 
<li>...</li> 
 
</ul> 
 
    
 
<h5 style="margin-bottom:-20px">23 Pine Road</h5> 
 
<h5 style="margin-bottom:-20px">Nottingham, NG1 5YU</h5> 
 
<h5>0115 9324567</h5> 
 
</div> 
 
</div> 
 
    
 
<div class="bottom-part"> 
 
<h5 style="margin-bottom: 0px">Copyright @2011 Jake's Coffee House</h5> 
 
<a href="http:www.google.com">jake@jcoffee.com</a> 
 
</div>

Answer 1

問題は、あなたの.main-部分のみ浮動divを含み、浮動div要素が.mainの高さを強制しないことです - それらをクリアするための部分。

結果として、.main-part divの高さは2pxに過ぎず、.bottom-partはすべての背後にある.main-part（.top-partの2px）の直後にあります。

あなたは浮動divをクリアする.mainパートのdivの高さを強制的に

.main-part:after { 
    content:" "; 
    display:table; 
    clear:both; 
} 

を追加することができます。

Answer 2

.bottom-partが.main-partの子ではないので、それは適用されません。あなたは、メインの部分を継承したい場合は、巣にそれらをする必要があります。

<h1 class="jake-cofee-shop">Jake's Cofee Shop</h1> 

<div class="main-part"> 
<div class="left-part"> 
<h4><a href="#">Home</a></h4> 
<h4><a href="#">Menu</a></h4> 
<h4><a href="#">Music</a></h4> 
<h4><a href="#">Jobs</a></h4> 
</div> 

<div class="right-part"> 
<h5>Come in and experience...</h5> 
<img class="image-perfection" width="250em" src="http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2012/04/White%20Coffe%20Cup%20With%20Beans-720x405.jpg"></img> 

<ul> 
<li>Specialty Coffee and Tea</li> 
<li>Freshly made sandwiches</li> 
<li>Bagels, Muffins, and Organic Snacks</li> 
<li>Music and Poetry Readings</li> 
<li>Open mic nights</li> 
<li>...</li> 
</ul> 

<h5 style="margin-bottom:-20px">23 Pine Road</h5> 
<h5 style="margin-bottom:-20px">Nottingham, NG1 5YU</h5> 
<h5>0115 9324567</h5> 
</div> 
<div class="bottom-part"> 
<h5 style="margin-bottom: 0px">Copyright @2011 Jake's Coffee House</h5> 
<a href="http:www.google.com">jake@jcoffee.com</a> 
</div> 
</div>