Horizontally aligning two rows of divs - css

Question

I have a couple rows of buttons, and I'd like one to be left aligned and the other right aligned -- but on a separate row.
If I were using tables this is how I'd do it:
<table>
<tr>
<td>Content Left Aligned</td>
</tr>
<tr>
<td align="right">Content Right Aligned</td>
</tr>
</table>
But I'm trying to use CSS and divs here. This is what I have: ( JSFiddle )
<div style='text-align:left;'>
<div class="btn1 rounded-corners">
Green
</div>
<div class="btn1 rounded-corners">
Blue
</div>
<div class="btn1 rounded-corners">
Purple
</div>
</div>
<div style="clear:all;"> </div>
<div style='text-align:right;'>
<div class="btn2 rounded-corners">
Six
</div>
<div class="btn2 rounded-corners">
Seven
</div>
<div class="btn2 rounded-corners">
Eight
</div>
</div>
<div style="clear:all;"> </div>
What am I doing wrong with this CSS? (see the JSFiddle for a working example of what's going on - there are some styles there that I didn't want to clutter up here)

Answer 1

Replace float:left with display:inline-block
Updated Fiddle
float is used for a very specific purpose. Placing <div>s on the same line is not it ;)

Answer 2

I agree with Pablo and would use CSS stylesheets rather than JS Fiddle
All you have to do is REMOVE the FLOAT properrty from your STYLES
And in place of DIVs use SPANs
No Other changes required!!
Copy and paste the code below into a NEW document and see.
.btn1
{
font-size:1.2em;
padding:5px 20px;
margin:0px 5px;
border: 1px solid #0E5727;
color:red;
cursor:pointer;
}
.btn2
{
font-size:.8em;
padding:5px 20px;
margin:0px 5px;
border: 1px solid #0E5727;
color:blue;
cursor:pointer;
}
.rounded-corners
{
-moz-border-radius: 20px; /* Firefox */
-webkit-border-radius: 20px; /* Safari, Chrome */
border-radius: 20px; /* universal */
}
<div style="text-align:left;">
<span class="btn1 rounded-corners">Green</span>
<span class="btn1 rounded-corners">Blue</span>
<span class="btn1 rounded-corners">Purple</span>
</div>
<div style="width: 100%;"> </div>
<div style="text-align:right;">
<span class="btn2 rounded-corners">Six</span>
<span class="btn2 rounded-corners">Seven</span>
<span class="btn2 rounded-corners">Eight</span>
</div>
<div style="width: 100%;"> </div>

Answer 3

You should use float property.
Would be something like this:
<div style="float:left;width:400px">
</div>
<div style="margin-left:400px">
</div>
Anyway you should use a css file appart.
Try it and tellme if it worked out.