Footer getting jammed into a column

Question

I have a three column layout. The last column on the right is:

#left_column {
 float: left;
 border: 1px solid #ccc;
 padding: 5px;
  width: 12em;
}

#main_content {
 float: left;
 margin: .3em;
 width: 35em;
 border: 1px solid #ccc;
 padding: 5px;
}

#right_column {
float: left;
width: 7em;
border: 1px solid #ccc;
padding: 5px;
}

#footer {
background: black;
color: white;
height: 5em;
}

My footer is going into the bottom of my right column. If I remove the right column the footer is still misplaced in the page. I presume it is something related to the float.

Answer 1

To ensure that the footer is below all floated elements:

#footer {
    clear: both;
}

There are other ways to handle floats, but with the little information in your question this is the most obvious way to go. You could also apply overflow: hidden (or visible or auto) to the float, which will make it behave more like a regular block.

Answer 2

(Removed) Oops! Your edit couldn't be submitted because:

Answer 3

Try setting a width on your footer

Answer 4

Sorry to use the answer box, I can't leave a comment or edit my previous post.

body {
margin: 0;
position: relative;  /* added this line */
 } 

And modified the footer a bit:
 #footer {
  position: absolute;
  bottom: 0;   
  background: black;
  color: white;
  height: 5em;
  width: 3em;
 }

When I do not include the width the footer disappears on the 3 column page but can be seen everywhere else. If I make the width 3em, the footer starts at the far left of the body and is 3em wide. On the 3 column page the footer is placed properly at the bottom but the alignment begins from the right_column's left edge.