奇妙なHTML/CSSの挙動

Question

私は次のようなHTMLがあります。以下のCSSで

<div id="red-header"></div> 
<h1 id="emp-name">Employee Name</h1> 

    <div id="midbar" class="bar"></div> 

<div id="emp-spotlight-content" class="clearfix"> 
    <div id="emp-pic-large" class="column clearfix"> 
    <img src="employeePictures/EmployeeImage.jpg"> 
    </div> 

    <div id="bio" class="column"> 
    <ul> 
     <li><strong>Team Member Since:</strong> August 2011</li>  
     <li><strong>Born in:</strong> LOCATION</li> 
     <li><strong>Birthday:</strong> BIRTHDAY</li> 
     <li><strong>Family:</strong> FAMILY</li> 
     <li><strong>Facts:</strong></li> 
     <ul> 
      <li>FACT 1</li> 
      <li>FACT 2</li> 
      <li>FACT 3</li> 
     </ul> 
    </ul> 
    </div> 
</div> 

<div id="footer" class="bar"></div> 

を：

.bar { 
height: 3px; 
width: 692px; 

background-image: url("shortredbar.jpg"); 
background-repeat: repeat-x; 
} 

#footer { 
height: 3px; 
width: 692px; 

background-image: url("shortredbar.jpg"); 
background-repeat: repeat-x; 
} 

#red-header { 
height: 40px; 
width: 692px; 
background-image: url("redbar.jpg"); 
background-repeat: repeat-x; 
} 

#emp-name { 
width: 692px; 
text-align: center; 
} 

#emp-spotlight-content { 

} 

.column { 
width: 306;    /* 692px/2 - (40) */ 
padding: 5px; 
margin: 10px; 
} 

#emp-pic-large { 
width: 306px; 
float: left; 
} 

#bio { 
float: left; 
} 

が

ミッドバーとフッターの両方がちょうどでちょうど差別、本質的には同じものですケースを変更する必要があります。 1つはコンテンツの上になければならず、もう1つはコンテンツの最下部にあるべきですが、両者は互いに重なっているコンテンツの上部に表示されています。

私は行方不明を誰も見ることができますか？

Answer 1

#emp-spotlight-contentにoverflow: hidden;を入れてみてください。それは0の高さに崩壊しているように見え、それは代わりにその中にコンテンツをラップするように強制します。