Question

Problem relates to this fiddle here: http://jsfiddle.net/k3QAC/1/ My friends and I are doing a project

I have three identical section tags that looks like this:

<section id="1">
 <h3>This is a heading.</h3>
 <p>This is 1 of 1 p tags.</p>
 <p>This is 1 of 2 p tags.</p>
 <p>This is 1 of 3 p tags.</p>
</section>
<section id="2">
 <h3>This is a heading.</h3>
 <p>This is 1 of 1 p tags.</p>
 <p>This is 1 of 2 p tags.</p>
 <p>This is 1 of 3 p tags.</p>
</section>
<section id="3">
 <h3>This is a heading.</h3>
 <p>This is 1 of 1 p tags.</p>
 <p>This is 1 of 2 p tags.</p>
 <p>This is 1 of 3 p tags.</p>
</section>

When you hover over any of the H3 tags in my Fiddle, I want the < p > tags to display in the exact same location. As in, if you have over section#1 h3, the p tags show starting at the top. If you hover over section #2 h3, the p tags show in the exact same spot. Same with section #3 h3.

Answer 1

If you want the visible paragraph to always appear at the top of the page, next to the list of headings, you want to use position: absolute; on the p tags, and use top: 0; in addition to left: 25%; You won’t use any positioning on the section tag so that the paragraphs are placed in relation to the document. If you would rather display the paragraph in relation to the section, simply add position: relative; to the section tag

section p { 
  position:absolute;
  left:25%;
  top: 0;
  width:75%;
  display: none;
}

Demo 1 : http://jsfiddle.net/qemuK/

However, your rule section h3:hover + p will only apply to the first paragraph following the h3:hover. As designed, the 2nd and 3rd paragraph of each section will always be invisible. To show all three paragraphs, you will need to wrap them in another element and show/hide that element, rather than the paragraph itself.

<section>
  <h3> This is a heading</h3>
  <div class="paragraphs">
    <p>1 1 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p>
    <p>1 2 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p>
    <p>1 3 This is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id tortor nulla, in placerat ligula. Fusce magna turpis, consequat ut tempus quis, elementum varius</p>
  </div>
</section>

And the CSS:

section .paragraphs { 
    position:absolute;
    left:25%;
    top: 0;
    width:75%;
    display: none;
}

section h3:hover + .paragraphs {
    display:block;
}

Demo 2 : http://jsfiddle.net/YcDuu/