Float left and right

Question

this problem has been bothering me for some time. So I have created some visual descriptions of my problem First here is my HTML structure I have 6 divs.. the first 3 float left and the last 3 float right. The last image shows the result I want but can't seem to get. Can someone out there help me here EDIT// Sorry heres my HTML and CSS ```

``` NOTE: I Cant do a left right left right left right option because Im getting my data from PHP via a Query to my database.. first query goes left second query goes right.... thanks a bunch /EDIT My floats result in this This is what I want

Accepted Answer

You can use CSS3 `column-count` property for this. Write like this:

```
.parent{
    -moz-column-count: 2;
    -moz-column-gap: 50%;
    -webkit-column-count: 2;
    -webkit-column-gap: 50%;
    column-count: 2;
    column-gap: 50%;
}
.parent div{
    width:50px;
    height:50px;  
    margin:10px;
}
.left{
    background:red;
}
.right{
    background:green;
}
```

Check this http://jsfiddle.net/UaFFP/6/

Float left and right

Solution

Problem