Category: CSS Code

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:

This code will allow the creation of a rounded corner DIV box. The rounded corner can be any size and any corner. It will also allow a drop shadow of any colour to be added to the DIV.

Continue reading Round Corner DIV