Question

I’m having trouble finding the right solution for this fully fluid layout. I want the Sub-title in the following fiddles to be vertically center aligned next to the icon. The Sub-title may break onto multiple lines depending on the size of the browser (and varying length of text).

I have two fiddles prepared – the first attempt is my preferred approach as I’ve more thoroughly tested similar layouts:

http://jsfiddle.net/mmDFC/

The second fiddle, is an attempt on the same situation using display:table-cell;, but for the life of me I couldn’t fix up the lost right text alignment, and I’ve also never thoroughly tested IE6+ compat with this display type:

http://jsfiddle.net/mmDFC/1/ (this almost works, save the loss of text-align:right;)

I have looked up a host of similarly titled SO questions but couldn’t find what I wanted, so great answer points me to one I’ve missed, or come up with a solution to the above.

All in the name of vertical aligned text… :/

---

Browser update: I fiddled in Chrome, I see IE8 behaves similarly, but Ffox3 behaves differently for solution 2.

Answer 1

If I understand what you want right, you just need to add display:table to the h2

<div class="wrapper clearfix">
    <h1>Main Title</h1>
    <h2>
        <span id="fluid">
            Fluid Span
        </span>
        <span id="icon">
            Lots of long text...
        </span>

    </h2>
</div>

.clearfix:after {
    content:"";
    display:block;
    clear:both; 
}
h2 {
    float:right;  
    text-align:right; 
    background-color:#999;
    display:table;
    width:43%;
}
span {
    background-color:#ccc;   
    border:1px #000 solid;
    vertical-align:middle;
}
span#fluid {
    display:table-cell;

    height:100%;

}

span#icon { 
    display:table-cell;
    width:60px;
    height:40px;
}

http://jsfiddle.net/thomas4g/WecP4/28/

Let me know if this isn’t what you want.