Question

I am attempting to style some html that I do not have control over. WYSIWYG. What I need to do is:

1. Have the text not wrap under the image.
2. Control the text’s vertical position. I am trying to position it approximately along the horizontal centerline of the image.
3. Text cannot be fixed width (the image however, can and is fixed width).

I have tried display: table, floating the text element and absolute positioning text, but they all had different problems. Thank you for any further ideas.

http://jsfiddle.net/6fjCX/3/ (you may need to shrink frame width to see effect)

img { 
   height: 66px; 
   width: 165px; 
   border: 1px solid black; 
}
#title-text { 
   font-size: 32px; 
   line-height: 36px; 
}

<h1 id="title-heading" class="pagetitle">
    <a href=""><img class="logo global custom" src="" alt=""></a>                
    <span id="title-text">
        <a href="">Installing Confluence 3.4 on a Windows 64 bit system</a>
    </span>
</h1>

Answer 1

I set a width on both elements as well as the wrapper <h1>, to make sure they would float next to each other and there would be no text underneath the image.

Try something like this: http://jsfiddle.net/6fjCX/5/

img {
    height: 66px;
    width: 165px;
    border: 1px solid black;
    background: red;

    /* Float the image */
    float:left;
}
#title-text {
    font-size: 28px;

    /* Since the element comes after in the markup */
    float:right;

    /* (h1 width) - (img width) - (#title-text left padding/margin) */
    width:420px;
}
#title-heading {
    /* set to a width that works for you */
    width:600px;
}

You could also absolutely position the span and set position:relative on the h1, but I try to avoid absolute positioning when possible.

Demo: http://jsfiddle.net/6fjCX/7/

img {
    height: 66px;
    width: 165px;
    border: 1px solid black;
    background: red;
    float:left;
}
#title-text {
    font-size: 28px;
    position:absolute;
    top:0;

    /* (img width) + (span left padding) */
    left:175px;
}

#title-heading {
    /* contain absolute positioned elements */
    position:relative;
}