[thelist] CSS challenge, vertical-alignment

Jay Blanchard jay.blanchard at niicommunications.com
Fri Mar 4 06:52:24 CST 2005


[snip]
That does work, pretty well.  That is exactly what I have done thus far:

<div class="bannerText">
   <h1 id="blogTitle"><?php bloginfo('name'); ?></h1><br>
   <h4 id="blogByLine"><?php bloginfo('description'); ?></h4>
</div>

[insert corresponding markup in CSS]

As a complication to this, the text is top-aligned to a point 75 px 
below the top of the page.  when you increase the font size from the 
browser controls this doesn't looks very good, as the text begins to 
overflow the banner area down and to the left.

What I would really *love* is a way to align the bottom of the text 
with a point on the screen, of with the bottom of the container 
(div.bannerText in this case) so that it would grow up and to the left 
instead.

Any ideas?
[/snip]

Anything past this point would require knowing where exact points were
for the header div. You know one of those points, the one that states
the depth of the header. Since the header has to dynamically resize
itself for width you would have no knowledge of the right-most point. I
suppose you could use JavaScript to get the screen width and re-write
the CSS on the fly. Then you could use positioning relative to the
header div.

Let me give some more thought to this...


More information about the thelist mailing list