Здравствуйте. Столкнулся со следующей ситуацией. Например, у меня список определений, который состоит из фото (dt) и ссылкой внизу фото - увеличить (dd) общий dl. После чего следует параграф с верхним бордером. Вопрос: Почему параграф становится сверху dl и как этоого избежать?

Пример кода:
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style type="text/css">
* { margin:0px; padding:0px;}
#content dl { float:left; margin:0;margin:15px 0 0 19px;}
#content dt {padding:10px; border:4px solid #D2D2D2; }
#content dd { padding:5px; margin:0; font-weight:bold}
#allf {border-top: 1px solid #C1B59C; margin-top:100px; display:block}
</style>
</head>
<body>
<div id="content">
<dl>
****<dt>[img]img/f1.jpg[/img]</dt>
****<dd>[img]img/zoom.gif[/img] увеличить</dd>
</dl>
<p id="allf">Далееееееее</p>
</div>
</body>
</html>
Заранее спасибо.