Float left, float right aren't working

Question

As you can see in my jsfidle :

.footer {
  background-image:url('/images/footer_bg.png') bottom repeat-x;
  height: 110px;
}
#footercontent {
  display:table-cell;
  vertical-align: middle;
  height:110px;
}
#leftfoot {
  float: left;
  font-family:maven;
  font-size: 15px;
  padding-left: 20px;
}
#rightfoot {
  float: right;
}

The #rightfoot right-floated divider isn't displaying on the right of the page, but instead alongside the #leftfoot , why is this?

Answer 1

You gave no width, so they will extend until the browser's window and therefore, push one below. To keep them side by side, declare a width.

For example, I declared:

#leftfoot, #rightfoot {
    width:50%;
}

Demo: JSFiddle

Note: See that I declared the padding in the container instead of the floated div. If you leave on the floated div, the final width would be 50% of window+20px (which will make the right float to line break). If you want to keep padding on the floated divs, add box-sizing:border-box; (but it's not supported by old browsers so it's best to leave padding for the container)

Answer 2

This is happening because your #footercontent is set to display as table-cell and has no parent width. Its width is currently controlled by the content within.

To resolve this, I've given it a parent divider which is set to display as table with 100% width:

<div id="footerContainer">
    <div id="footercontent">
        ...
    </div>
</div>

#footerContainer {
    display:table;
    width:100%;
}

To align the #rightfoot content to the right, I've simply given that a text-align of right:

#rightfoot {
    text-align:right;
}

JSFiddle .