How to get that first DIV behave as it should?

[Zoohyhoge]

I'd greatly appreciate your comments on the following problem:Within Jommla 2.5, I created a custom-component that shows several divs of the same class (.cnlp_trainer). Those divs may contain different amounts of text and will stretch accordingly.Now, the very first div is always higher than it should be, but only the first one, the second (third, fourth...) displays as it should, look at this:look at a screenshot pngHere's a snippet of the HTML:\[code\]<h2> test</h2><form id="adminForm" name="adminForm" method="post" action="http://localhost:8888/index.php/society-of-nlp/31-test"><div class="cnlp_trainer"> <div class="cnlp_header"> Element #1, New York </div> <div class="cnlp_subheader"> certified January 1, 2013 </div> <div class="cnlp_column"> <div class="cnlp_desc"> </div> </div> <div class="cnlp_footer"> <div class="clr"></div> </div></div><div class="cnlp_trainer"> <div class="cnlp_header"> Element #2, London </div> <div class="cnlp_subheader"> certified January 1, 2013 </div> <div class="cnlp_column"> <div class="cnlp_desc"> </div> </div> <div class="cnlp_footer"> <div class="clr"></div> </div></div>...</form>\[/code\]And here's the CSS-Snippet:\[code\].cnlp_trainer { background-color: #FEFCEB; border-left: 0.5px solid #AAAAAA; border-top: 0.5px solid #AAAAAA; box-shadow: 2px 2px 3px #777777; font-family: Arial,Helvetica,sans-serif; font-size: 0.8em; margin-bottom: 20px; margin-top: 20px; padding: 6px;}.cnlp_header { color: #330066; font-weight: bold; margin-bottom: 5px;}.cnlp_subheader { color: #555555; font-size: 0.9em; font-weight: normal; margin-bottom: 10px;}.cnlp_footer { clear: both; margin-top: 12px;}.cnlp_desc { position: static;}...\[/code\]Am I missing something? Please help!It's in Firefox as well as in Safari.Thank you in advance,Michi