I am building something with divs that will be filled with dynamic data... so I dont know how tall the divs will be, but I want to make sure that div has a margin so the next div is 25px below the last peice of content.
So below I set up an example... this one works fine... DIV structure simple:
#comment_row {position: relative; top: 33px; left: 0px; width: 600px; margin-bottom: 25px;}
#comment_row #comment_data .comment_text {position: relative; top: 0px; left: 0px; width: 515px; font: 11px arial, san-serif; color: #000000;}
<div id="comment_row">
<div id="comment_data">
<div class="comment_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div id="comment_row">
<div id="comment_data">
<div class="comment_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</div>
</div>
</div>
But make it more complex, and the margin seems to only apply to the ICON div... the one with a picture....
Any ideas about this?
#comment_row {position: relative; top: 33px; left: 0px; width: 600px; margin-bottom: 25px;}
#comment_row .icon {position: relative; top: 0px; left: 0px; width: 36px; height: 36px; padding: 1px; border: solid #E2DFDF 1px;}
#comment_row #comment_data {position: absolute; top: 0px; left: 49px; width: 515px; }
#comment_row #comment_data .user_name {position: relative; top: 0px; left: 0px; width: 515px;}
#comment_row #comment_data .comment_text {position: relative; top: 0px; left: 0px; width: 515px; font: 11px arial, san-serif; color: #000000;}
#comment_row #comment_data .comment_date {position: relative; top: 3px; left: 0px; width: 515px; font: 10px arial, sans-serif; color: #7c7e71;}
<div id="comment_row">
<div class="icon"><img src="images/usericons_lg/0002.jpg" alt="your user icon" title="your user icon"/></div>
<div id="comment_data">
<div class="user_name"><a href="#" class="action_text">k-money</a></div>
<div class="comment_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
<div class="comment_date">Yesterday at 4:15pm <a href="#" class="remove_tag">[x]</a></div>
</div>
</div>
<div id="comment_row">
<div class="icon"><img src="images/usericons_lg/0004.jpg" alt="your user icon" title="your user icon"/></div>
<div id="comment_data">
<div class="user_name"><a href="#" class="action_text">themikebot</a></div>
<div class="comment_text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.</div>
<div class="comment_date">Yesterday at 4:15pm <a href="#" class="remove_tag">[x]</a></div>
</div>
</div>