I'm trying to figure out how to postition a div in relation to another so as to avoid using margins...

For example, in order to make the comments of a blog appear relative to the blog post...is there a CSS styling markup to use to tell the comments div that all comments must always appear 20 pixels below the bottom border of a post?

Margins are not suitable because we cannot tell how long a blog post will be...so if we use 600px from bottom for the comments div (for example) and a post is very long, they will all overlap...

Any ideas on how to write this CSS rule?

This might help you -- Div Box Positioning

Actually what you want is a margin along with the proper html structure.

Structure your html so the comment comes right after the post with both in the same overall container. Without doing anything it should then sit below the post. The space would be the greater of the default margins between the elements. Then just use a margin on one or both to set the space you want.

The above may or may not work depending on how you've structured things to this point, though without seeing the current code there's no way to really know. Could you post a link the page in question or post some code here? A link would be easier.

You really shouldn't need to do anything so special to get the results you want. My guess is the problem is more with the way you have things structured to this point.

"Learn CSS Positioning in 10 steps"
http://www.barelyfitz.com/screencast...s/positioning/

vangogh is right - I was "assuming" you already had your structure in place.

Thanks for the replies, actually this situation involves a theme from Wordpress, which I'm trying to move the elements around....to customize it further.

So far, I've been successful to achieve a certain degree of change although it sure takes alot of time, considering I knew squat about CSS just a week ago! But still, interesting stuff to occupy my time after work and I gotta admit I feel a little proud of the fact I can actually mess a little with CSS and a little PHP. So far no major disasters!

I actually created a new element or div called #comments to represent the entire comments block and (everything to do with it) in the CSS file and adjusted the width using percentages, it made all the comment areas smaller and fit into the central column. I'm modifying a three column WP theme....

But I find that the comments appear very low down the page, and there is a big gap between the start of comments and the bottom border of the blogpost entry.

Upon checking the CSS file, I notice the blogpost entry is not a separate div in the CSS file, although all the various elements of post-entry are under /* Posts/. They are not grouped or represented by a single div element...

and likewise there isnt a seperate #comments under /*comments/....so I went to create one and called it #comments. Doing so, enabled me to adjust all the list of comments with one change in #comments.

Should I also create a new #postentry under /* Posts/ to govern the whole bunch of elements there? As I'm trying to make the comments relative to the post entry, I think its better I give the post entries a top governing class or division with a name of its own so to make the theme recognize a relation between comments and post entry? Or is it not needed?

As I mentioned earlier, I wanted to make the #comments be always placed 20px below the blog entry post, I looked at various themes in WP, and all of them dont seem to specify the postitioning of the comments + comments list, it comes naturally for the comments to be right below the post entries....only this theme I'm working at doesnt behave like this... and at the moment I dont know what's a good command line to "order" the whole comments block to follow the whole entry post block at a requirement of ....well,....20 pixels below it...

It would be more beneficial if you could give us a link to look at -- almost all Blogs are set-up using similar coding, and it won't be hard to find the problem.

I was just playing around with my own WordPress blog and I may have found what you need to edit.

The comments are all surrounded by an ordered list with a class of commentlist applied to it. Look for .commentlist in the css or maybe ol.commentlist and give that a margin-top of 20px.

.commentlist {margin-top:20px}

If you don't find any css already there for .commentlist create a new style for it.

If that doesn't close the gap then it may be that the posts or the container for the posts has a margin-bottom applied that's larger than 20px.

travelagent is right though that a link would help us find the problem. I'm sure it won't take long if we can see the code.

Also give a look at this:

http://www.henick.net/vignettes/positioning.php