CSS vertical align bottom trick
this is more for my personal record, but in case you’re interested:
i’ve been working on a site for a few months now, that needs to have the address and phone number of the company aligned at the bottom left of every page, within the left hand column, a little above the footer.
now, i both love and hate CSS, for various reasons (lots of them alcohol related). in any event, the big problem with this is that it’s difficult to say to css: “always put this element at the bottom of this column”, because the typical way to do such a thing is with the top-margin attribute, and you set it to however further below you want. at least, that’s what i do. and of course the problem with doing this is that when the length of the column is always changing, that number has to change based ont he page content. which is a job for javascript, who i really hate working with, cause she’s sort of like the annoying boring chick who talks to you all the time and somehow thinks that makes you friends. Just because you’re always THERE doesn’t mean i like you.
so after a little javascripting and much soul searching, i hit upon the solution. instead of nesting the div in the left nav column, i placed it AFTER the footer, at the very bottom of the page. then i set the top margin to -100, and it moved up 100 pixels, right where it needed to be!
of course, this didn’t work in firefox. so i took out my hunting knife and slowly carved D batteries into my eyeballs for a few minutes (sparkly!). then i realized that it didn’t work because for some reason the command was moving the address below the left nav column. so it was there, but something was on top of it. z-indexing everything didn’t work (it never does), but using the “position:relative” property fixed it!
overall record: CSS: 35, Manlio: 10
but that’s a lot better than it was a few hours ago…
Post a Comment
You must be logged in to post a comment.