Question

I’m having trouble making divs top position be relative to its preceding subling.

I have:

<style>
#container {position:absolute; top:0px; height:100%}
.question {position:relative;border: 1px double black;}
.question [scope=title] {position:relative; top:0px; color:black;font-size:28px; border-bottom: 1px double black;}
.question [scope=body] {position:relative; top:0px; color:black;font-size:18px; }
.question [scope=author] {position:relative;top:10px}
.question [scope=tags] {position:relative;top:0px}
</style>

and then

    <div ID="container">
        <div class="question">
            <div scope="title">A</div>
            <div scope="body">B</div>
            <div scope="author">C</b></div>
            <div scope="tags">D</div>
        </div>
</div>

I expect author div to be 10px lower than normally would be, and for the following div to be relative to that. However, “tags” and “author” overlap.

So irritating, yet I bet there is a simple answer. Any help?

Answer 1

Try to set the margin-top on the author instead:

.question [scope=author] {position:relative;margin-top:10px}