Need help determining how to position this element with CSS - css

Question

I am attempting to style some html that I do not have control over. WYSIWYG. What I need to do is:
Have the text not wrap under the image.
Control the text's vertical position. I am trying to position it approximately along the horizontal centerline of the image.
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">
<img class="logo global custom" src="" alt="">
<span id="title-text">
Installing Confluence 3.4 on a Windows 64 bit system
</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;
}