Ok, now your CSS logically makes sense, but the issue is different browsers will not render the page correctly as you would prefer. Now looking at your initial syntax, it seems that the results would be shown vertically ascending each other on the page to the left and right.
With that in mind, from my own personal experience, I've found using tables to align such things is much more efficient than solely using divs. Of course, different people will go about things different ways, but that method has always worked best for me. Those kinds of things I will have a div I usually call "main" to represent the entire page, then section out the page as necessary using divs, then inside those divs, I will either add another nested div to that and then use positioning to get the table in a specific place, or just straight up position the table from there.
However if you don't want to go about it that way, thats perfectly fine too. You can achieve the same result using just divs by changing your css to something like:
top: //This is how far you want the divs to be from the top of the page in either pixels (px), inches (in) or percent of course.
top: <same height as the other div>
I have found that the float and margin property only works real well what you are using with those properties is contained in something like a table cell, or another div. Hope this helps. Let me know if you have any questions.