Question

I’m trying to push the text I have in my header so that the bottom of each character touches the bottom of the div. Almost as if the border for the div underlined each letter. How would I accomplish this? Im basically trying to push the text I have down a couple pixels.

Answer 1

One way to achieve this is to set the container’s position to relative, and the child element to absolute:

<div style="position:relative;height:200px;border:1px solid #ccc;">
    <div style="position:absolute;bottom:0px;left:0px;">
        I'm a bottom feeder...
    </div>
</div>

EDIT

Just for clarification, I am not using line-height because it does not behave correctly if the text wraps to a new line.

See here for a breakdown of the different techniques. Particularly note the examples using relative vs. absolute positioning:

http://jsfiddle.net/c2tqZ/1/