как сделать эти два деления влево и вправо

В HTML вы делаете 2 div и даете одно свойство CSS float:left и для другого даете float:right. и чтобы очистить плавающее, вы даете ему overflow:hidden до родительского div или дополнительный элемент div после float (пустой) с clear:both свойства CSS, которые заставят планировку не выходить из потока.

Проверьте демонстрацию.

div{height:200px; width:200px; border:1px solid gray}
.one{float:left;}
.two{float:right;}

<div class="one"></div>
<div class="two"></div>

Если бы я понял, что вам нужно:

CSS:

'.boxWrapper{
    display: inline-block;
    width: 100%;
}
#onlineBookingDiv
{
    float: right;
    text-align:center;
    width:40%;
    background-color: #ccc;
}
#zumaContent{
    float: left;
    text-align:center;
    width:40%;
    background-color: #eee;
}'

HTML:

<div class="boxWrapper"> <div id="onlineBookingDiv">BOX 1</div> <div class="zumaContent" id="zumaContent">BOX 2</div> </div>

См. Этот ПРИМЕР

В вашем примере вы используете фиксированное позиционирование для одного элемента. Фиксированный позиционированный элемент заставит его придерживаться относительно документа. Таким образом, это нормально, ваш другой элемент не является. Все зависит от того, хотите ли вы этого поведения или нет? В противном случае см. Другие ответы.

http://jsfiddle.net/pP3YE/

#onlineBookingDiv {
    position:fixed; 
    right:0; 
    width:40%;
    background: red;
}
.zumaContent {
    position:fixed;
    width:40%;
    background: green;
}