Question

I try to work out, that the two p should be besides the image and the second p not under the image. It would be possible with float: left but this causes a lot of browser bugs (mainly under IE). How could I get my wished result with display: inline-block?

<div id="one">
    <img src="http://www.jcopro.net/wp-content/uploads/2011/12/ubuntu-logo1.gif" alt="" />
    <p>Content</p>
    <p>Content</p>
</div>

---

#one {
    display: inline-block;
    width: 800px;
    vertical-align: top;
}

#one img {
    display: inline-block;
    vertical-align: top;
    width: 100px;
}

#one p {
    display: inline-block;
    vertical-align: top;
    width: 600px;
    border: 1px solid gray;
}

Demo: http://jsfiddle.net/MK5E9/1/

Edit:
Okay I mis-described my problem: I don’t want to have the p in one row besides each other, I want to have them under each and both paragraphs besides the image.

Answer 1

Yes, but you need the container to be wide enough to contain all 3 elements. The following works when shrinking you <p>s to 300px wide.

Example

EDIT, based one OP’s edit:

Well, that’s what float was actually originally meant for. Floating images and allowing the correct flow of text around them. Example.

If you wish for the image to be on a different “column”, meaning the text won’t flow around the image, but will start a new line at the line of the image, you need to limit the width of your elements. See here.