I know the fault here is somewhere that I defined a 100% height that CSS parses as expanding the full page.
The primary example is http://zagadka.net
For some reason, it even adds the horizontal scrollbar for just a few pixels, but the main thing, obviously, is that it doubles the page height after the page ends. Like I said, .I'm sure that it is a 100% height problem somewhere. Also of note is the .news section needing to be at 80%, or it extends to the right of the page. Again, I'm sure this is because it is doing 80% relative to the entire window, not just the remainder of the size of its own div.
body { background-color: #ffffff; color: #041D3C; position: absolute; margin: 0; padding: 0; padding-top: 70px; width: 100%; height: 100%; font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif; font-size: 16px;}a{ color:#041D3C; text-decoration: none;}a:hover{ text-decoration: underline;}.menu{ position: absolute; right: 10px; top: 65px;}.min_eye{ position: absolute; left: 0px; top: 0px;}.min_block{ position: absolute; background: #4E6780; width: 54px; height: 56px; border-right: 2px solid #152434; border-bottom: 1px solid #152434; left: 0px; top: 0px;}.min_line{ position: absolute; top: 48px; width: 100%; border: 1px solid #152434;}.min_title{ position: absolute; right: 10px; top: 9px;}.zagadka{ font-size: 48px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;}.year{ color: #ADADAD; font-size: 24px;}a.year:hover{ text-decoration: none;}.vert_line{ position: absolute; top: 0px; left: 54px; width: 0px; height: 447px; border: 1px solid #152434; z-index: 99;}.leftside{ position: absolute; top: 58px; height: 538px; z-index: 10;}.logo{ position: relative; top: 150px; height: 400px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; font-size: 34px;}.large_eye{ position: absolute; left: 30px; top: 415px; z-index: 9; background-color: #828F9E;}.sub_eye{ position: absolute; top: -50; border: 137px solid #848C9C; height: 100%;}.news{ position: relative; top: -62px; left: 274px; width: 80%; font-size: 14px; color: #848C9C;}.news_text{ width: 100%; padding: 5px;}.zrotw_line{ width: 100%; border: 1px solid #848C9C;}.zrotw_line_title{ width: 400px; border: 1px solid #848C9C;}.tail{ width: 100%; height: 100%; background-color: #828F9E;}
<body><div class="min_block"></div><hr class="min_line"><hr class="vert_line"><div class="min_title"> <font class="year">mmxiv</font> <a href="./index.php"><font class="zagadka">з а г а д к а</font></a></div><div class="menu" align="right"> <font color="#8E8E8E">[ </font> <a href="http://zagadka.net/consulting.php/">c o n s u l t i n g</a> <font color="#8E8E8E">| </font> <a href="http://zagadka.net/portfolio.php">p o r t f o l i o</a> <font color="#8E8E8E">| </font> <a href="http://zagadka.net/albums/">a l b u m s</a> <font color="#8E8E8E">| </font> <a href="http://zagadka.net/fedsyn.php">f e d s y n</a> <font color="#8E8E8E">| </font> <a href="mailto:alyosha@zagadka.net">c o n t a c t</a> <font color="#8E8E8E"> ]</font></div><div class="leftside"> <img src="./images/leftside_text.png" alt="Mysterious Text"><br></div><div class="logo" align="center"> z a <u> g<font color="#383838"> a</font><font color="#717171"> d</font><font color="#868686"> k</font><font color="#9D9D9D"> a</font><font color="#C5C5C5"> n</font><font color="#D3D3D3"> e</font><font color="#DADADA"> t <font color="#E9E8E7"> </font></u></div><div class="large_eye"> <img src="./images/bottom_center_eye.png" alt="Big scary eye"></div><hr class="sub_eye"><div class="news"> <hr class="zrotw_line"> <b>Good Enough For Who it is For</b> <b>[</b>August 30th, 2014<b>]</b><br> <hr class="zrotw_line_title" align="left"> <div class="news_text"> As you may be able to tell, there are a few... quirks. Such as the bottom down there stretching on for a bit, which isn't intentional, but is oddly difficult to fix with only using modern CSS standards.<br> <br> I'll get to that when it is necessary. Or I have a lot of free time. Otherwise, most everything turned out pretty well. This page structure only uses 2 images and is insanely easy to fix. </div> <br> <hr class="zrotw_line"> <b>LIVE WORK UNDERWAY</b> <b>[</b>August 21st, 2014<b>]</b><br> <hr class="zrotw_line_title" align="left"> <div class="news_text"> Currently converting the page to more of a CSS3 base. Things may look weird or broken or stupid. The purpose of this - beyond being an exercise and serving as demonstration of my work - is to make a fully CSS3/HTML4 compliant site with as few images as possible while formatting properly through different browsers and screen resolutions.<br> <br> This does have practical effects in work - for one, updating data on a page is much easier if it is just some text in an include file than it is to change embedded images. It is more flexible, as well, and easier to update. </div> <br> <hr class="zrotw_line"> <b>Page Being Adapted</b> <b>[</b>July 29th, 2014<b>]</b><br> <hr class="zrotw_line_title" align="left"> <div class="news_text"> This page is a temporary filler until I decide what content I want to publish on my public website.<br> <br> Things I am considering range from various photo albums, a portfolio of web design, political and social writings, previous content I have published, content from the games I am invested in (and have fond memories of, this may be rolled into the albums), archives of websites I deem important enough, reviews of media... whatever I deem both important and open to the public.<br> <br> Until then, I will keep various aspects of my life segregated and this page a welcome to you, however you got here. You may contact me at the link above or by <a href="mailto:alyosha@zagadka.net" style="color:#041D3C; text-decoration:none">clicking here</a>. Thanks, have a great day! </div></div><div class="tail"> </div></body>
So my basic question, as a student, would be how the CSS is parsed in relative association to the other div elements.