In the markup below, I'm attempting to get a side by side display of the "content-footer box s1" element and the "content-footer widget_pages" element. However, I can't seem to get them side by side on the same horizontal line. Its as if there is a clear:right on the content-footer.box.s1 element

HTML Code:
<div class="main">
            <div role="main" class="content">
               <article class="entry">
                  <p>content goes here</p>
               </article>

               <!--FLOAT THIS ELEMENT LEFT-->
               <div class="sb2 content-footer box s1">
                  <h4 class="sidebarTitle">Box 1 content</h4>
                  <div class="textwidget">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
               </div>

               <!--FLOAT THIS ELEMENT RIGHT OF PREV SIBLING-->
               <div class="sb3 content-footer widget_pages">
                  <h4 class="sidebarTitle">Pages</h4>
                  <ul>
                     <li class="page_item page-item-15"><a href="http://localhost/contact/">Contact</a></li>
                     <li class="page_item page-item-14"><a href="http://localhost/give-back/">Give Back</a></li>
                     <li class="page_item page-item-17"><a href="http://localhost/privacy/">Privacy</a></li>
                  </ul>
               </div>

            </div>
            <aside role="complementary" class="sidebar">
              <p>aside content here</p>
            </aside>
            <div class="clear">&nbsp;</div>
</div>
Code:
.content-footer.box.s1 {width:40%;float:left}
.content-footer.widget_pages {width:40%;float:right}