Проблема с размещением div после фейсбука в друзьях

Каждый раз, когда я включаю код для друзей facebook, таких как box, поле div-элемента ниже, оно выглядит дурацким. Я не могу контролировать, где его позиционируют. Он либо исчезает, либо перекрывается с другим div. Первоначально я просто хотел специальные события, события, а затем fbFriends подряд, а затем ящик div ниже трех div. Я пытаюсь обернуть divs, чтобы все контролировать, но я все еще не увенчался успехом. Любая помощь будет оценена

специальные события fbFriends

поле -------------------box

<div id="specialsWrapper">
        <div id="specials" ><p>Featured Specials</p></div>
        <div id="events" ><p>What happening at the hub</p></div>
        <div id="fbFriends">
            <div  class="fb-like-box" 
                data-href="https://www.facebook.com/pages/********" 
                data-height="395" data-width="250" data-show-faces="true" 
                data-colorscheme="dark" data-stream="false" data-header="true" />
        </div>
    </div>
</div>
<div id="box" ></div>

#specialsWrapper
{
    height: 450px;
    width: 920px;
    color: white;
}

#specials {
    float: left;
    border:2px dashed white; 
    height:390px;
    width: 270px;
    color: white;
    margin: 25px 10px 0px 48px;
}

#specials p {
    margin: 0px;
    padding: 15px;
    text-transform:uppercase;
    font-size: 24px;
    font-style: oblique;
}


#events {
    float: left;
    border:2px dashed white; 
    height:390px;
    width: 270px;
    color: white;
    margin: 25px 15px 15px 15px;
}

#events p {
    margin: 0px;
    padding: 15px;
    text-transform:uppercase;
    font-size: 24px;
    font-style: oblique;
}

#fbFriends {
    float: left;
    margin: 25px 15px 15px 15px;
    width: 250px;
    height:390px; 
}

#box
{
    clear: left;
    border: 2px dashed white;
    height: 60px;
    width: 853px;
    color: white;
    margin: 25px 15px 15px 48px;
}