[thelist] CSS challenge, vertical-alignment

[Jay Blanchard]

[snip]
This is definitely the solution that came to mind when I read the
problem. It relies on the fact that contrary to common understanding,
position: absolute does not position relative to a window but instead
relatve to the containing block. So if your header is already
absolutely positioned and your byline is a child of it then all you
need to do is:

#blogByLine { position: absolute; bottom:0; right: 0}
[/snip]

Essentially this is what I wanted to do in my response as I imagined
(again, I did not test) that the inherited bit would use the initial box
for its margin. Apparently that is not correct (again, I haven't tested
it). So, the final code....

#header {
	position: absolute;
	top: 0;
	left: 0;
	height:100px;
	width: 100%;
	padding: 0;
	margin: 0;
	border-bottom: 1px solid black;
	color: #000000;
	background: #FFFFFF;
}
#header div.byline{
	position: absolute;
	bottom: 0;
	right: 0;
}


<div id="header">
	<div class="byline">My Byline</div>
</div>

...works as desired and takes into account width of the window as well