Search code examples
htmlcsspositioning

div positioning is messed up

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.

Solution

  • 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