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

<style>     .left { float:left; }     .right { float:right; } </style> <div id="container">    <div class="left"></div>    <div class="left"></div>    <div class="left"></div>    <div class="right"></div>    <div class="right"></div>    <div class="right"></div> </div> 

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

Answer 1

Float one left , one right, and give first the clear:both property

<div class="left clear"></div> <div class="right"></div> <div class="left clear"></div> <div class="right"></div> 

css

.left {float:left} .right {float:right} .clear {clear:both} 

Example