The problem here is that your berichten div accidentally gets placed in the position you want, whereas it’s actually going wrong. What the browser is doing is first drawing the left sidebar, then floating verzenden to the right of it, and then it wants to float berichten the right of verzenden, but that doesn’t fit, so you get a float drop as it’s called, and berichten drops below verzenden, but still floats up against the left sidebar. After that the browser is working from the top of the berichten div, since that is the last one drawn.
To solve you would need to wrap verzenden in berichten in a div that’s floating (left) and 50% wide. You can then remove float: left; and width: 50% from both verzenden and berichten and just let them flow naturally.
Alternatively you could let the left sidebar float left, the right sidebar float right, and then just put verzenden and berichten in the html without any floats and let them flow naturally. Basically
You like floats . There are several ways of creating a three column effect. One solution is to rearrange your HTML and float that right sidebar to the right.
My preferred way to do this for IE8+ is to use display:table and display:table-cell (also assuming absolute positioning relative to columns is not required).
The benefit of this approach is that you get equal columns without specifying heights and get a layout that doesn’t break when squashed. The drawbacks are if you need to position something absolute in relation to the column and then older browsers support becomes awkward.