html - 奇怪的 HTML/CSS 行为

Question

我有以下 HTML:

<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>

使用以下 CSS:

.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;
}

中间栏和页脚本质上是相同的东西，只是为了以防万一我需要更改它们而有所区别。一个应该在内容之上，另一个应该在内容底部，但它们都显示在内容的顶部，彼此堆叠。

任何人都可以看到我错过了什么吗？

Answer 1

尝试将 overflow: hidden; 放在您的 #emp-spotlight-content 上。看起来它正在折叠到 0 的高度，这将迫使它改为将内容包裹在其中。