[css-d] Avaters floating wrong

[bas]

Hello list,

I have a problem with pictures that float outside the parent div. I'm sure I'm 
missing something simple, but I can't fix it. Here's a page with stubborn 
avatars:

http://www.5gt.nl/node/31#comment-12

I thought that divs, when enclosed within eachother, would prevent this 
behaviour, but no... 
The results are the same in FF 1.0.7 and IE 6. Code for html and css is below.

Thanks in advance,

Bas van der Veen
--
GPG key for [EMAIL PROTECTED]: 9346DC34
Fingerprint: 46C9 103A 9771 5A4B A727 6D45 322F 168F 9346 DC34

[css]
.comment {
  border: 1px solid #888;
  padding: 0;
  margin-bottom: 1em;
}
.comment .content {
  padding: 1px 5px;
}
.comment .links {
  border-top: 1px solid #888;
  margin-bottom: 0;
  padding: 2px 5px;
}
.comment .new {
  text-align: right;
  font-weight: bold;
  font-size: 10px;
  float: right;
  color: red;
}
.comment .picture {
  background-color: #fff;
  border: 1px solid #888;
  float: right;
  margin: 1em;
}
.comment .submitted {
  border-bottom: 1px solid #888;
  padding: 2px 5px;
}
.comment .submitted .new {
  color: #f00;
}
.comment .title a {
  display: none;
  font-size: 1.1em;
  font-weight: normal;
}
[/css]

[html]
<!-- BEGIN: comment -->
  <div class="comment">
    <h3 class="title">{title}</h3>
    <div class="submitted">{submitted}<!-- BEGIN: links --> &nbsp; | 
{links}<!-- END: links --><div class="new"><!-- BEGIN: new -->{new}<!-- END: 
new --></div></div>
    <!-- BEGIN: picture -->{picture}<!-- END: picture -->
    <div class="content">{content}</div>
  </div>
<!-- END: comment -->
[/html]

pgpFvMdptpj37.pgp
Description: PGP signature

______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/