Strange HTML/CSS Behavior

Question

I have the following 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>

With the following 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;
}

Both the mid bar and the footer are essentially the same thing, just differentiating just in case I need to change them. One should be above the content, the other should be at the bottom of the content but they are both showing up at the top of the content stacked on top of each other.

Can anyone see what I'm missing?

Answer 1

Try putting overflow: hidden; on your #emp-spotlight-content. It looks like it is collapsing to a height of 0 and that will force it to wrap the content inside of it instead.