Your classes .left and .right both have width 100%. This means your divs are trying to get the same space in their container, so one will get below the other because they don't fit on the same row.
If I understand correctly your problem, you can fix it by changing the following classes:
.left {
float:left;
min-width:300px;
max-width:900px;
width:50%;
}
.right {
float:right;
min-width:300px;
max-width:900px;
width:50%;
}
I changed the width to 50% for this classes.