1 reply [Last post]
css-is-killing-me
css-is-killing-me's picture
Offline
newbie
Last seen: 12 years 5 weeks ago
Timezone: GMT+3
Joined: 2010-12-12
Posts: 2
Points: 3

Hi, this is really a beginner's question, after reading a couple of books on CSS I'm trying to make my first web site and, apparently, it's harder in practice than in theory. Smile I've got a simple fixed-width 2 columns layout, using floats.. Here's how it looks:

question-regarding-vertical-align.png

What I can't figure out is how to align the bottom of the second paragraph (.author) with the bottom of the picture to the right (that img), I can nudge it down there with padding or margins but then, when a visitor zooms in, the text starts spontaneously jumping up or down and the bottom of the text isn't aligned to the bottom of that picture anymore. Sad The first thing I thought about was the vertical-align property, I've tried set it to the bottom value, applied it to the aside (hoping that the elements within this tag will inherit the value), then I've tried this property on all the other elements (blockquote, and then p) but it still doesn't work the way I thought it's supposed to work: shouldn't it move the text to the bottom of the containing element?

What would be nice is to have the bottom of the text to the left perfectly aligned to the bottom of that image to the right and when a visitor zooms in the bottom of the text doesn't move. I've just checked how it looks in IE6 with "Text size => Larger" and again, the text grows from the bottom down, while what I need is that it grows up, to the top, and the bottom of this paragraph doesn't move so it stays aligned with the picture.. how can it be done?

css-is-killing-me
css-is-killing-me's picture
Offline
newbie
Last seen: 12 years 5 weeks ago
Timezone: GMT+3
Joined: 2010-12-12
Posts: 2
Points: 3

After hours of frustration

After hours of frustration I've found the answer by myself. Smile Not sure it's the best way to accomplish what I want though. But just with margins and padding I can't "hold" the paragraphs still, they always jump when zooming/enlarging font size no matter which units I use—tried px, em, %...

So I applied position: absolute; to the blockquote without any offsetting and then position: relative; to the both paragraphs, with right: 0; top: 0; for the 1st one (.quote) and right: 0; bottom: 0; for the 2nd one. Now they stick to the corners and are perfectly aligned with the picture to the right even after zooming in. And IE6 also likes it, enlarging font size and the paragraphs are still where they should be.