473,322 Members | 1,614 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Problem getting margin-bottom to work with DIV of variable height

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>
Jul 19 '06 #1
1 5929
Banfa
9,065 Expert Mod 8TB
Why are you using the relative positioning (which I always though didn't have a lot of use except for setting the origin for an absolutely positioned sub-element) why don't you just use the bottom margin (and may be a top on as well)

#comment_row {
width: 600px;
margin-bottom: 25px;
}

?

Also you are using the ids comment_row and comment_data for several divs, this breaks the standards ids must be unique on a page, if you want to use a style rule with several elements make it a class like comment_data.
Jul 19 '06 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

1
by: Tony Benham | last post by:
I'm having problems with a css layout where a margin is being inserted with the wrong width. I believe it's my css that's at fault since it is wrong in netscape 7.1, opera,7.11 and IE6 but I cannot...
6
by: SWE | last post by:
Hi all, I'm new to using style sheets for laying out my web pages. I have a horizontal navigation menu that is split into two sections - three buttons on the left and a submenu on the right that...
2
by: Florian Brucker | last post by:
I got a problem with code looking like that: <div class="outer"> <div class="inner"> Sample text </div> </div> The outer DIV has margin/padding=0, the inner DIV has a margin (all 4 sides)....
18
by: Niels | last post by:
Hi group, I have some problems with clearing floated divs. My usual method works fine in Konqueror, but not in Firefox. Here's an example: <html><body> <div id='left' style='float:left;...
18
by: Greg G | last post by:
http://mysite.verizon.net/gdguarino/indexnew.htm It's not a high priority site, just some of my photos throughout the years. The address above is an experiment for a new home page. My intended...
4
by: aamirghanchi | last post by:
Hi, I am hoping if there is a kludge in IE6 to make the textbox align with the top label. It aligns perfectly fine in Opera and in Netscape/Firefox to some extent. Thanks. <style>...
2
by: steve.higgins | last post by:
Hi All, I'm trying to present a list of short text items in an inline style, flowing over more than one line if necessary. Each item should be in a fixed-width box. The following code does most...
3
by: kibong | last post by:
I am trying to get what the user inputs into the box and then take that to check their answers and make sure everything is correct before moving on. here is my code <%@ Page Language="vb" %> ...
4
by: =?Utf-8?B?QXJuZSBHYXJ2YW5kZXI=?= | last post by:
<form> How can I remove the extra space on the left and right side inside my button <input type="submit" name="mybtn" value="Entrez les informations sur votre courtier"...
5
by: Neviton | last post by:
Hi this is the html to generate the behavior: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.