Div not always floating right - html

Question

I'm currently having trouble with my css:
.text {
width: 70%;
height: auto;
padding: 7px;
margin-bottom: 10px;
background: #ffffff;
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
background: -webkit-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: -o-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: -ms-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: linear-gradient(135deg, #ffffff 0%, #ebebeb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=1 );
border: 1px solid rgba(0,29,50,0.5);
border-radius: 6px;
}
.side {
width: 20%;
height: auto;
padding: 7px;
float: right;
margin-bottom: 10px;
background: #ffffff;
background: -moz-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #ebebeb));
background: -webkit-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: -o-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: -ms-linear-gradient(-45deg, #ffffff 0%, #ebebeb 100%);
background: linear-gradient(135deg, #ffffff 0%, #ebebeb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb', GradientType=1 );
border: 1px solid rgba(0,29,50,0.5);
border-radius: 6px;
}
(See it working at http://jsfiddle.net/8L5Tf/)
As you can see at JSFiddle my second sidebar touches the other, but I want it to float beneath the other one, how can I fix this?

Answer 1

You need to clear: right; on the .side class: http://jsfiddle.net/8L5Tf/1/
Floats can be tricky though, so consider putting them both in one div, as Richard said in his comment. It might just end up being easier to manage.

Answer 2

You could add a container div;
<div class="content">
<div class="side">
<div>
Text...
</div>
<div>
Text ...
</div>
</div>
<div class="text">
Text text
</div>
</div>
(and then update your CSS so that the cosmetic styling that was applied to .side is applied to .side > div.)
See http://jsfiddle.net/8L5Tf/3/