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?

I notice that you use class clearfix in your markup but don't have any actual CSS for it; is that intentional? — Pops
– Pops, Commented Nov 23, 2011 at 20:09

Nate B · Accepted Answer · 2011-11-23 20:01:48Z

2

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.

answered Nov 23, 2011 at 20:01

Nate B

6,34428 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

YuKagi Over a year ago

Thank you so much. It's always the little things. I really appreciate your help!

Collectives™ on Stack Overflow

Strange HTML/CSS Behavior

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related