Question

Basically, I want two different elements in the leftmost area of a div, and two for the rightmost area of a div.

However if I use float:left and float:right twice, I get the following:

   ELEMENT                                   ELEMENT

          ELEMENT                     ELEMENT 

rather than

   ELEMENT                                    ELEMENT

   ELEMENT                                    ELEMENT

This is because, when I float for the second time the css floats for the remaining space left.

How do I fix this bug?

Answer 1

You can use clear:both; with float:left; property.

Try Jsbin demo

.left {
   float:left;
   width:40%;
   height:240px;
   border:1px solid red;
}

.right {
   float:right;
   width:40%;
   border:1px solid red;
   height:240px;
} 

.elem1 {
   float:left;
   margin-bottom:20px;
}

.elem2 {
   float:left;
   clear:both;
}

.elem3 {
   float:left;
   margin-bottom:20px;
}

.elem4 {
   float:left;
   clear:both;
}

<div class="left">
    <div class="elem1">element 1</div>
    <div class="elem2">element 2</div>
 </div>
 <div class="right">
    <div class="elem3">element3</div>
    <div class="elem4">element4</div>
</div>