Question

I would like to center a text element (in this case, the h2 sub-headline) by having it ignore the floated image to the left. My preference would be for the h2 sub-headline to vertical center-align with the h1 headline. Is there any way to do this with CSS alone?
Here is a sample layout:
http://tinyurl.com/84otx8y
Note: the width and height of the sample image may change.

Answer 1

You want to ignore the floating element? That’s possible, however, I would not recommend this, as this will create an ugly result if your h2 headline is to wide:

.wrapper{
    position:relative;
}

.wrapper h2{
    position:absolute;
    left:0;
    right:0;
    margin-top:1.5em
    z-index:2;
}
.wrapper h2 + p{
    margin-top:2.5em;
}

Note that this solution will have the h2 border on top of the image. You can prevent this by using position:relative;z-index:4 on your floating image.