Box not floating next to each other

[alij2022]

Hi, I have a div where I put two boxes in it, and I want to float the boxes left and right NEXT to each other exactly. However, the right box does float right but it is going at the bottom. See image. I want the right box to be where the red square is, that is next to the left box and NOT at the bottom.

Here are my CSS codes for the div and boxes:

div.contents {
    width:1000px;
    margin:auto;
}
div.left {
    width:490px;
    float:left;
    background:#ffffff;
    box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    clear:both;
}
div.right {
    width:490px;
    float:right;
    background:#ffffff;
    box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    clear:both;
}

Why it is not next to each other?

 

[BigDady]

Remove both clear: both; Do your clear in the next element.