Image in paragraph not working as it should

If I put an image inside a paragraph tag without aligning works fine. If I align it image goes outside paragraph. Problem is that Image is MUCH larger than text.

<div id="main-paper-bg">
    <div id="content">
    <h1>After School Program</h1>   
    <p><img class="left-only" src="images/bgi/after-school/main-img.jpg" width="450" height="630" alt="Main Img" align="left">Coming Soon</p>   
    </div>
</div>

And CSS

#main-paper-bg {
    width: 740px;
    padding: 30px;
    display: block;
    float: left;
    margin-bottom: 40px;
}

#content {
    background: black;
    height: auto;
    text-align: left;
    margin-left: auto;
    开发者_开发知识库margin-right: auto;
    padding-right: 30px;
    padding-left: 30px;
    border: 1px solid #999;
}

p {
    line-height: 160%;
    padding-top: 0;
    padding-bottom: 30px;
    font-size: 12pt;
}


img.left-only {
    border: none;
    margin: 10px 10px 10px 0;
    padding: 0;
}

You have a close-parentheses in your styles that may be breaking things: "background: black);"

you don't need align="left" in your <img> tag. The align attribute is also deprecated: use css to set width height, align and other features. In this case, you don't need to align it left, since the default value for text-align is already left.

like so: http://jsfiddle.net/SebastianPataneMasuelli/equ8p/1/