Trying to align text to div bottom

[Zagadka]

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!

[niche]

what are you using for positioning? I don't see any floats.

[Zagadka]

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

[Zagadka]

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

[Ingolme]

Your new page looks to me better aligned than the old one, unless you actually wanted the large text to be crossing through the line. I'm viewing in Firefox.

[Zagadka]

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

 

Edited September 13, 2014 by Zagadka

[Ingolme]

Since you want it to cross the border you're going to have to artificially move it down, vertical-align won't move text outside of its container. You can set position: relative and move it down from the top, for example: top: 5px;

 

You should remove the <font> tags from your document. <font> is no longer part of the HTML specification, so it's not actually HTML. You can put a <span> in its place, since you're only using the class attribute. In some cases (like <font class="zagadka">), you don't even need a <span>, put the class on the <a> element that's surrounding it.

[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.

[dsonesuk]

I don't think you require position: relative, try

<div align="right" class="min_title">    <span class="year">mmxiv</span>   <a href="http://zagadka.net/index.php" class="zagadka">з а г а д к а</a></div>

with

.zagadka {    display: inline-block;    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;    font-size: 48px;    margin-top: 9px;}.year {    color: #ADADAD;    display: inline-block;    font-size: 24px;    margin-bottom: 9px;    vertical-align: bottom;}

You are basically turning them into inline block element so you can apply margins, margin-top forces .zagadka down causing overlap, this will drag .year down with it, but counteract this by apply same margin value to the bottom of .year.