The desired effect is to have the red element containing the text "aligned to bottom", er, aligned to the bottom of the yellow box and be the same width.
Given the same css applied to both blocks below:
.container { position: relative; } .parent { width: 50%; background: yellow; }
.bottom_50 { position: absolute; width: 50%; bottom: 0; background-color: red; }
ie. width is based on width of containing block
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
.bottom_100 { position: absolute; width: 100%; bottom: 0; background-color: red; }
ie. width is based on width of parent element
Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
See section 4 of 10.1 Definition of "containing block" in the CSS2.1 specs.