div positioning is messed up

Question

I have following setup:

.calender-month{
    float:left;
}
.buttondiv{
    float:left;
}

<div class="buttondiv"><button id="backbtn">back</button>
<div class="calender-month">calender</div>
<div class="buttondiv"><button id="frontbtn">front</button></div>

Initially, I have this.

After trying adding buttons as mentioned above, I get this.

Please help.

Answer 1

Add clear:both; to your calendar div CSS

#calender {clear:both;}

This will bump the calendar block below the buttons if this is what you are looking for