inline-block goes under floated div - css-float

Question

I'm trying to style my headings with display:inline-block; but i've a problem with a behavior of the property.
Jsfiddle : http://jsfiddle.net/Tu2GU/
See the titles, when a title has a long text, the heading goes under the floated div. I want the heading to break and then display 2 lines (or more) and stay on the left of the floated div, not under it.
Can't find anything helping, thanks !
edit : i updated the jsfiddle : http://jsfiddle.net/Tu2GU/13/ (removed % width for the floated div)
I don't want to have 2 divs side by side, the floated div on the right is meant to be right there, like a page summary giving link inside the page.
Also, heading are under the floated div (in html code) not over.

Answer 1

Since the right list uses a percent width, you can set a max-width with a percent width
h2 {
... Your original CSS ...
max-width:calc(75% - 40px); /* 40px comes from horizontal padding */
}
Demo
I'd recommend using a class to apply to each header instead of using the same max-width on each h1, h2, etc, but that's just personal preference
If the width of the right floated div is set, use calc(100% - 440px) or whatever the left horizontal padding + right width is

Answer 2

Create a float: left; container using the CSS below:
.lfloat {
float: left;
width: 75%;
}
You just have to wrap your text in a new div:
<div class="lfloat">
<!-- content -->
</div>
Demo
This will contain the content to the left and keep your sidebar to the right.
Note: You must clear your floats with clear: both;.

Answer 3

Why not try floating the elements on the left instead of using inline-block?
* {
font-family: Tahoma, Geneva, sans-serif;
font-weight: normal;
font-size: 1em;
}
.rfloat {
float: right;
width: 25%;
background: #9C3;
color: #111;
}
h1 {
float: left;
margin: 0;
padding: 10px 5%;
background: #06C;
color: #FFF;
}
h2 {
float: left;
margin: 0;
padding: 10px 5%;
background: #F33;
color: #FFF;
width:65%;
}
http://jsfiddle.net/g4Grv/

Answer 4

updated your Jsfiddle: http://jsfiddle.net/Tu2GU/12/
Main thing was a wrapping div around your h1 and p tag alongside of display:inline-block and vertical-align:top
Is this what you needed?

Answer 5

You have a few options. You can float the heading to the left so that it will slide up - you will have to set a width, though.
h2 {
float: left;
width: 80%;
}
Another option would be to set a max width. Since inline-block elements are technically block level, you can supply a width without breaking anything. You could try this:
h2 {
max-width: 80%
}
Yet another option would be to make the element inline. This will let the browser determine the best fit for the header.
h2 {
display: inline;
}
This will make the header wrap around the list and you may get the results you want. This method will make height and width parameters not work, so you will have to substitute those for line-height and padding