HTML5 / CSS DIV's not aligning horizontally?

Question

I am having trouble getting this too work, for some strange reason the DIV's do align horizontally correctly but the second div ends up under the first one. Any help would be greatly appreciated.

HTML:

<footer>
    <div class="inner">
    <section id="footer-copyright" class="clear left">
    <ul>
    <li>© 2013
    <a href="/">Company</a>
    |
    <a href="sitemap.html">Sitemap</a>
    |
    <a href="privacy.html">Privacy Policy</a>
    </li>
    </ul>
    </section>
    <section class="footer-box clear right">
    <ul>
    <li>Design by <a href="/" target="new">Template</a></li>
    </ul>
    </section>
    </div>
</footer>

CSS:

footer .inner {
    padding-top: 50px;
}

#footer-copyright {
    display: block;
    padding-top: 35px;
    width:50%;
}

#footer-box {
    display: block;
    padding-top: 35px;
}

footer ul {
    color: #FFFFFF;
    list-style: none outside none;
    padding: 10px 0;
}

.inner {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

.clear {
    clear: both;
    display: block;
}

.right, .alignright {
    float: right;
}

.left {
   float:left;
}

Maybe I just need a fresh set of eyes... :)

You can view a working link here

Answer 1

It's because your footer-box has clear: both; rule set (from the clear class). Remove it and add padding-top: 35px.