Плавающая высота содержимого меню

У меня есть главная страница Sharepoint 2013 по умолчанию с плавающим меню слева. Проблема в том, что я не могу использовать плавающие элементы в области содержимого. Упрощенный фрагмент макета выглядит так:

<style>
    .leftMenu{height: 400px;width: 200px;float:left;border: 1px solid Red;}
    .content{border: 1px solid Blue;margin-left: 200px}
    .floatingItem{float:left;border: 1px solid Green;margin-left: 10px;}
</style>
<div class="leftMenu">LeftMenu</div>
<div class="content">
        <div class="floatingItem">floatLeft</div>
        <div class="floatingItem">floatLeft</div>
        <div class="floatingItem">floatLeft</div>
        <div class="floatingItem">floatLeft</div>
        <div style="clear:both"></div>
        I want to appear just bellow floating items
</div>

I need the template to be 100% width. The template behaves fine unless I put floating items in the content block. Then I get unexpected behavior - the clearing div and any content bellow floating items appears below the left menu's bottom line.

Можно ли заставить блок контента вести себя нормально? Я ожидаю, что высота блока контента будет не более двух строк: ~30px. Кстати, я хочу решить это без использования трюков JavaScript.