Zagadka

I was trying to avoid relative positioning, but I suppose I don't have much choice here - but what is weird is the mmxiv works with sub and Zagadka doesn't. I will follow up on the font tags, thanks.

Well, the D character is supposed to just drop over the line over the menu, the text above the line is supposed to be just a few pixels over it. The "Old" page looks the same on Chrome and FF to me

Hate to bump, but any other ways to deal with the text align? No idea why part of it works as sub and the other part doesn't

It is attached to .min_eye, which is the first element in the body.

I am trying to adapt my CSS to be correct, so doing a little revision - but I have a problem where I can't get the vertical-align to work. For reference to what I'm failing to do and what I'm aiming to do: New page - http://zagadka.net/test.blah.php Old page - http://zagadka.net/test2.blah.php I've got it well within acceptable deviation (and more responsible use of CSS) - except for the text align of the title on the upper right. On the old page it was absolute, and so was the line, so the "mmxiv з а г а д к а" bit lined up perfectly. I got the mmxiv lined up with vertical-algin: sub;, but the title text just refuses to budge down, even using bottom and negative %. I figure that I am confusing or leaving out something regarding alignment. The relevant code: .min_eye{ float: left;}.min_title{ padding-right: 10px; border-bottom: 2px solid #152434; height: 56px;}.year{ color: #ADADAD; font-size: 24px; vertical-align: bottom;}.zagadka{ font-size: 48px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; vertical-align: text-bottom;} <div class="min_eye"> <img src="http://zagadka.net/images/subpage_upper_left_eye.png" alt="I'm watching you"></div><div class="min_title" align="right"> <font class="year">mmxiv</font> <a href="http://zagadka.net/index.php"><font class="zagadka">з а г а д к а</font></a></div> So how do I get the class .zagadka to align to the bottom as it does in the old page? Thanks in advance!

Alright, I fixed most of the issues (I may have to go back and redo some of the absolute layout positions later) So, I put the eye bit and the div in the lower left into a container div. I need the div in the lower left corner that needs to stretch vertically to the size the news div takes up, which is variable. How do I match that height?

Worked great, thanks

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.

Display on the following page (relevant code displayed below): http://zagadka.net/portfolio.php The primary problem is that the text in the right side divs (everything in outerDiv) sill simply not accept any padding-left, so the text lines up flush to the left side div (siteTumbnail). ((I had to do some inline CSS for custom colors)) .siteThumbnail { float: left; border: 5px solid; border-color: #152434; background-color: #152434; width: 500px; height: 275px; } .outerDiv { border: 5px solid; border-color: #152434; border-left: 0px; color: #152434; height: 275px; } .titleBar { background-color: #152434; padding: 8px; color: #ffffff; font-weight: bold; } .statusBar { color: #ffffff; padding: 8px; font-weight: bold; } .description { padding: 8px; background-color: #ffffff; color: #000000; line-height:150%; font-size: 14px; } <div style="margin-left: auto; margin-right: auto; width: 1100px;"> <div class="siteThumbnail" style="border-color: #D6DF20; background-color: #D6DF20;"> <a href="http://zagadka.net/portfolio/eldercareoptions/"><img src="./portfolio/images/eldercareoptions.jpg" border="0"></a> </div> <div class="outerDiv" style="border-color: #D6DF20;"> <div class="titleBar" style="background-color: #D6DF20; color: #000000;"> Elder Care Options (2014) </div> <div class="statusBar" style="background-color: #1BA239;"> Fully Functional </div> <div class="description"> Though this page is rather simple (developed pro bono), I have gone to pains to develop it as a "default" of sorts.<br> It feclects simplicity, consistent design, and presentation of information. One of the rules of design is that people pay far more attention to what appears on their screen than they do what they have to scroll down to. Thus, the data on this site is dense, but clear.<br> I also intentionally gave it a "lighter" feeling due to the nature of the topic (elder care). And also, to be honest, to break my reliance on blue color hues. </div> </div></div> I've tried cramming padding-left into every div element on the page with no luck. My suspicion is that the float:left is messing things up, but I'd like some more opinions. Thanks!