best way to create a block of text on the left and image on the right?

Question

I want to create a division with text on the left and an image on the right. The div is about 300px height. I'm trying out different ways but would prefer to follow standards for this kind of format. Thank you.

HTML

<div id="early">
    <h3> Napoleon's Origins </h3>
    <br>
    <br>
    <p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p>   
</div>

CSS

#early {
    margin-right: 250px;
    height: 250px;
    background: url(../images/Napoleon_23yrs.jpg);
    background-repeat: no-repeat;
    background-position: right;
    background-size: 160px 225px;
    line-height: 3px;
}

Answer 1

Create a div and apply display:inline-block to the paragraph tag. The image following will automatically align to the right of the text.

Demo

---

HTML:

<div class="content">
<p>Napoleon Bonaparte was born in his family's ancestral home on August 15, 1769.</p>
<img src="DD1_mini.jpg"></img>

CSS:

.content {height:300px; width:auto; }
.content p {display:inline-block; vertical-align:top;}

Answer 2

3+4 = 7 and also 5+2=7 Things are depends how simply you implement. I always use this method -

<p>Lorem ipsum <img src="image.jpg" class="right"></p>

Where css will be

.right { display: inline-block; float: right }