Adding a floating div box to your site can be a great way to utilize the space on your page. The problem comes when you try to float 2 or more boxes on the right or left of the page, then you run into problems as the boxes will float over each other.
There is a simple solution to this, by adding the code:
clear: right;
You can have each box appear below the next on the right hand side.
Here is an example: This is without the clear right code
div.mainbox {
width: 500px; height: 200px;
background: #ccc; border: 1px solid #999;}div.box1 {
position:relative; float: right;
width: 300px; height: 40px;}div.box2 { position:relative; float: right; width: 300px; height: 40px; text-align: right;}
This is what it looks like
And this is with the clear right code:
Now you can see it working perfectly: