« first day (1 day earlier) 

7:21 AM
I think you are misunderstanding the positioning. I've looked over the fiddle and you are correct that left and right for #pageTitle are different. However they should be different because the left and right are referring to the extents of the container. Since the #pageTitle has content "Page Title" and therefore has width, then the left and right values will never be identical.
As for the .section-title... yes it is top:10% and yes, that means it should be placed 10% from the top of the .section. Looking at the computed style for the fiddle in my current browser window, the .section has height:122.1px and the .section-title has top:12.2px which is 10%. Resizing the window, the dimensions are still as expected. Are you seeing something different?
 
7:36 AM
Lastly, as for the #header, the CSS height:50% will result in the #header occupying 50% of the window height, not the document height. The only way to set this correctly AFAIK is through JavaScript, for example stackoverflow.com/questions/5931591/…
 

« first day (1 day earlier)