Jump to content

Trying to align text to div bottom


Recommended Posts

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!

Link to comment
Share on other sites

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 by Zagadka
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>


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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...