Question

I’m still learning CSS, so please pardon me if this is something that is easily solved or taught in a class or book.

Here’s what I see:

The two gray boxes are placeholders for image files further up the page. Those live in a different div that closes out before reaching the footer div. The source for the footer is:

<div id="footer"> 
  <div class="column"> 
    Column 1<br> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> 

    <br><br> 

    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
  </div> 

  <div class="column"> 
    Column 2<br> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
    <a href="#">link</a> 

    <br><br> 

    <a href="#">link</a> <br/> 
    <a href="#">link</a> <br/> 
  </div> 
</div> 

Here is the CSS for the footer:

#footer {
    clear: both;
    min-height: 100px;
    background-color: #B0C4D1;
    padding-left: 8%;
}

.column {
    width: 200px;
    float: left;
}

So if I make min-height long enough, then the blue covers all of the links in the footer, which is good. But I’d like to understand why I would need to do that. Why don’t the columns in the footer div qualify as content so that the background gets filled up? If someone would link me to the relevant terms/tutorials explaining this, I’d really appreciate it. I’m having trouble coming up with the right words to find my answer.

Answer 1

Floated elements collapse. Add overflow: hidden to your #footer. Example with your code here: http://jsfiddle.net/jackrugile/5HcG9/