CSS float-left prevent words to go on new line - html

Question

I have the following code:
html
<div class="container">
<div class="float-left">
<img width="550" src="image.jpg" alt="" />
</div>
<div class="float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
css
.container{
width:960px;
}
.float-left {
float:left
}
.clear{
clear:both;
}
h1.new{
font-family: RockwellMT-Light;
font-size: 28px;
line-height: 31px;
}
I want the divs to act like 2 columns One will be the image and the second one should be text that can go down as much as it takes.
Since float left does not have a fixed width the problem is that the whole element h1 is jumping on the new line and the text does not goes on the next line.
I don't want to give fixed widths to the floating divs.
How can I prevent this?

Answer 1

You could remove class="float-left" from the second <div> and it would work.

Answer 2

you can try smth like this:
<div class="container">
<div class="something">something</div>
<div class="nextthing float-left">
<h1 class="new">Some long text here that should word wrap</h1>
</div>
<div class="clear"></div>
<div>
.container {
position: relative;
}
.something {
position: absolute;
}
.nextthing {
text-indent: size_of_.something;
}
Or change float:left, to display:inline-block;