Relative positioning to an absolutely positioned element - html

Question

I am experimenting with single-page design, and have built a page out of a number of different pages, by essentially creating a column of <div> elements each at 100% of the window height, and positioned absolutely one under another.
Each page, therefore, requires it's elements to be set absolutely, since there is (as far as I can tell) no normal document flow to follow. However, when it comes to text, I am finding it difficult to design. I'd like to try and keep the current design, rather than start over.
On a particular page, I have a text container. In that container, there are two titles. The first title heads two small paragraphs, the second heads one:
HTML
<div id="introTextContainer">
<div id="introTextHeader" class="blurbheader">First title</div>
<div id="introText" class="blurb">
Generic text about the roots of the company
</div>
<div id="introTextParg2" class="blurb">
further information about the roots
</div>
<div id="introStatement1" class="blurb StrongStatement">
Second title
</div>
<div id="introTextParg3" class="blurb">
Eye-catching mission statement
</div>
</div>
CSS
.blurb {
font-family: Lato;
font-size: 16px;
padding-right:10px;
font-size: 1.4vh
}
.blurbheader {
font-family: Lato;
font-size: 2vh;
padding-right:10px;
}
.StrongStatement {
font-family: Lato;
font-size: 20px;
}
#introTextContainer {
height: 20%;
width: 45%;
background: rgba(255,255,255,0.8);
position: absolute;
left: 200px;
top: 10%;
border-radius: 5px;
}
#introTextHeader {
position: absolute;
width: 280px;
left: 30px;
top: 5px;
height: 10%;
}
#introText {
position:absolute;
left: 10px;
font-family: Lato;
}
#introTextParg2 {
position:absolute;
left: 10px;
}
#introStatement1 {
position:absolute;
left: 30px;
}
#introTextParg3 {
position:absolute;
left: 10px;
}
At a standard resolution of 1080p, all of this looks perfectly acceptable. However, when the resolution is changed, the design is not responsive to the same. As you can see with the CSS, I have been experimenting with viewport-height for the text, however the spacing and height of the <div> elements is a different matter.
How can I create a positioning/size context within the scope of the text containers, in order that I can set the height and padding of the text paragraphs therein, within the scope of those containers? The current approach uses javascript, but I don't like the idea of attempting to use javascript to target every screen size possible as this would result in a lot of spaghetti code. Ideally, I would like to use javascript only to set the heights of the "page" <div> elements and the containing boxes.
edit: CSS, JS, HTML of page design
The first page is given a width and height of 100%. The subsequent pages are altered with JQuery. The value data-section-name is used in the seamless scrolling plugin. The canvas is used only to house the background image:
HTML
<section id="pageOne" class="panel pageone" data-section-name="sectionpageOne"> <!-- About -->
<canvas id="pageOneCanvas"></canvas>
<div id="introTextContainer">
<div id="introTextHeader" class="blurbheader">First title</div>
<div id="introText" class="blurb">
Generic text about the roots of the company
</div>
<div id="introTextParg2" class="blurb">
further information about the roots
</div>
<div id="introStatement1" class="blurb StrongStatement">
Second title
</div>
<div id="introTextParg3" class="blurb">
Eye-catching mission statement
</div>
</div>
</div>
</section>
CSS
#pageOne {
position: absolute;
/*top: 0;*/
left: 0;
width: 100%;
}
#pageOneCanvas {
height: 100%;
width: 100%;
z-index: 1;
background-image: url("/Resources/images/aboutcanvas.jpg");
background-size: cover;
opacity: 0.6
}
JS
// Canvas height and positioning
var posheight = $(window).height();
$("#home").height(posheight);
$("#pageOne").height(posheight);
$("#pageTwo").height(posheight);
$("#pageThree").height(posheight);
$("#pageFour").height(posheight);
$("#pageFive").height(posheight);
$("#pageOne").css("top", posheight);
$("#pageTwo").css("top", (posheight * 2));
$("#pageThree").css("top", (posheight * 3));
$("#pageFour").css("top", (posheight * 4));
$("#pageFive").css("top", (posheight * 5));
Additionally, the current solution for fixing the text container dimensions is also in JS. You can start to see why I want to achieve this in CSS, as it's becoming messy here:
var introTextTitleHeight = $("#introTextHeader").height();
$("#introText").css("top", (introTextTitleHeight + 10));
$("#introTextParg2").css("top", ($("#introText").position().top + $("#introText").height() + 10));
$("#introStatement1").css("top", ($("#introTextParg2").position().top + $("#introTextParg2").height() + 10));
$("#introTextParg3").css("top", ($("#introStatement1").position().top + $("#introStatement1").height() + 10));

Answer 1

Would removing position: absolute; on the child divs not do what you want?
And use margin-left instead of left.
So the rules would look like this:
#introTextHeader {
margin-left: 30px;
margin-top: 5px;
height: 10%;
}
#introText {
margin-left: 10px;
font-family: Lato;
}
#introTextParg2 {
margin-left: 10px;
}
#introStatement1 {
margin-left: 30px;
}
#introTextParg3 {
margin-left: 10px;
}