When I try to research this I find it hard to separate this scenario from the much debated image replacement discussions and debates, but in my case I want to use BOTH and image and text.
The problem is that I want to have both a logo and image but obviously the header wants to be on it's own line, so i've floated the image left to get the desired effect. It seems fine to me but I don't recall coming across this problem before and I really need to get this one right first time, so my questions: Is there anything wrong with this method, are there any alternative methods worth considering and are there any further considerations, for instance I didn't see any need to clear the float but maybe I should do after the h1 tag.
<html>
<head>
<style>
h1 {
line-height:100px;
font-size:75px;
background:#eee;
}
img#logo {
margin-right:20px;
float:left;
}
</style>
</head>
<body>
<img id="logo" src="http://placehold.it/100x100">
<h1>Title</h1>
<p>Page Content ...</p>
</body>
</html>
Here's the JSFiddle http://jsfiddle.net/CAc3E/
I don't see anything wrong with this approach. Search engines should just ignore the image and everyone is happy. Personally I place the logo inside the h1 tag just because I'm lazy, but I haven't actually tested that for disadvantages, so take with a grain of salt.
Since you're forcing the heading to be the same height as the image, I don't foresee any problems caused by missing clear styles, either. But, of course, test in the worst case browser(s) (notably IE7 and IE6 if your target audience is really bad) before you ship stuff like this.