如何使div成为另一个

Question

Hello i'm creating a pagination script , i already done everything and now i'm trying to make the index page , it will contain the data retrieved from the database and i wanted to be represented on the form of 2 divs the first for the thumbnail and the other will contain the title under the thumbnail. So here is my code : here is the looping it's ok for it i just want you to see the html code inside.

$brk_cnt = 0;

while($row = mysqli_fetch_array($results))
{
 echo ' <td>
        <div class="datamore">'.$row['thumbnail'].'</div><div class="data1r1">$row['title']</div>
        </td>';

 //break or print <tr> condition
 if(++$brk_cnt % 4 == 0)
 {
    echo '</tr><tr>';
 }
}


echo '</table>';

and the css :

.data1r1 {
width:198px;
height:235px;
background-color:#4D72B7;
border-radius:5px;
/* border shits */
border:1px;
border-color:black;
border-style:solid;
border-radius:5px;
clear:both;

}
.datamore {
width:198px;
height:150px;
background-color:#C7441A;
position:absolute;
border-radius:5px;
clear:both;
}
#table {
    margin-left:250px;
    margin-top:20px;
    position:absolute;
}

I though i'm using the proper css at first but when printing data it's not a good result here is how the divs looks like :

_{(source: hostingpics.net )}

the 2 divs are supperposed the one on the other .. i want to get the blue one under the orange one. Thanks sorry for this long description but i wanted to make things clear.

Answer 1

remove the position:absolute

.datamore {
 width:198px;
 height:150px;
 background-color:#C7441A;

 border-radius:5px;
 clear:both;
}

Example

Answer 2

replace the position:absolute to position:relative

.datamore {
width:198px;
height:150px;
background-color:#C7441A;
position:relative;
border-radius:5px;
clear:both;
}