If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

JavaScript Bottom Alignment of Images?

I am trying to replicate the way in which images in the feed on this website (http://haw-lin.com/) are bottom-aligned.

From copying and tinkering with the code on the site, I conclude that the bottom alignment is not being achieved through pure CSS—at least not evidently through the use of linked style sheets as opposed to inline style definitions. I determined this by commenting out all the linked style sheets; many other aspects of the site appeared wonky when I did this, but the bottom alignment of the images was not broken. The images only began top aligning relative to each other when I commented out included javascript files or sections of js code.

Any help in diagnosing what specifically is making the bottom alignment of images on this site possible and/or advice on how to similarly implement this effect on my site would be greatly appreciated.

The browser itself is actually doing the alignment. Looking in Firebug or the developer tools for Safari or Chrome show that the vertical-align CSS property is being inherited from the browser default style: baseline.

All of the images are inline on that page. By default, images are aligned to the "baseline" of a line of text, so that the bottom of images are aligned horizontally with the bottom of many lower case letters like "a" or "z".

Nothing special is being done at all. That's just how browsers render images naturally.

toicontien, THANK YOU! Not that I'm super savvy in CSS but I'm kicking myself for not figuring this out sooner but I'm very grateful that you pointed it out to me. Such a simple and elegant solution compared to the needlessly complex solution I'd been using!