I'm facing a challenge with aligning an image and text on a webpage. The goal is to have the text aligned to the right of the image, but currently, the image appears inside the text block. To see the issue more clearly, I've created a fiddle here: JSFiddle
Below is the CSS code:
.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
}
.blockquote {
font-size: 14px;
font-family: 'Times', serif;
font-style: italic;
color: #222222;
background-color: #f7f7f7;
background-image: url(http://somesite/Icon_Quote.png);
background-position: left top;
background-repeat: no-repeat;
min-height: 40px;
padding: 10px;
margin-bottom: 10px;
}
.QuoteTextToLeft {
float: left;
margin: 50px 10px 10px 10px;
}
And the HTML structure:
<div class="container_12">
<div>
<img class="QuoteTextToLeft" src="http://someothersite/man.png"
alt="" width="200" height="250" />
<a id="andrew_reeder"></a>
<p class="blockquote">START HERE - this is a test, ... (snipped)
<br />
<br />this is a test, a test of the emergency broadcast system....
<br />
<br />this is a test, a test of the emergency broadcast system....
<br />
<br />this is a test, a test of the emergency broadcast system....
<br />
<br />Someone who cares
<br />
<br />Some title</p>
</div>
In this setup, the image ends up within the paragraph element. My objective is to position the image outside the <p class="blockquote"> tag, aligned where it says "START HERE".
The current display looks like this:
But ideally, I'd like it to appear as follows: