Rounded Corner Box CSS problem

[bigcougar]

I have a rounded corner box which contains records from a MySQL database.

My problem is that the two bottom corner images do not go on the bottom but rather stay right below the upper 2 corner images as if the box is empty.

This happens when I generate the box both in HTML and PHP.

How can I bring the corners down where they belong?

The problem can be seen on this page - bottom right (the orange corners)
http://www.troutsalmonchar.com/index1.php



Here is the php version, wrapping the MySQL table.



echo "<div class='roundcont'>";
echo "<div class='roundtop'>";
echo "<img src='tl.gif' alt='' width='15' height='15' class='corner' style='display: none' />";
echo "</div>";
echo "<div class='Right_FM'>";

echo "<table width='100%' border='0' align='left'>";

while($nt=mysql_fetch_array($result)){
$dt=date("F j, Y", $nt[post_time]);
echo "<tr>";
echo "<td width='30%'>$dt</td>";
echo "<td width='70%'><a href='http://troutsalmonchar.com/Forum/viewtopic.php?f=$nt[forum_id]&t=$nt[topic_id]'>$nt[post_subject]</a></td>";
echo "<tr>";
}

echo "</table>";
echo "</div>";

echo "<div class='roundbottom'>";
echo "<img src='bl.gif' alt=''width='15' height='15' class='corner' style='display: none' />";
echo "</div>";
echo "</div>";

[Wickham]

I wouldn't do it your way, but I can make your method work like this:-
CSS edits:-


.roundcont { position: relative;
width: 250px;
background-color: #949F83;
color: #fff;
float: right;
height: 200px;/*200px;*/
width: 281px;
}

.roundbottom { height: 15px; clear: both; background-color: #949F83;
}


Markup:-


................Lake - Kamloops</a></td><tr></table>
</div><!--end of .roundtop-->

<div class='roundbottom'><img src='images/bl.gif' alt=''width='15'
height='15' class='corner' style='position: absolute; left:0;'
/><img src='images/br.gif' alt=''width='15' height='15' class='corner'
style='position: absolute; right:0;' />
</div><!--end of .roundbottom-->

</div><!--end of .roundcont-->