HTML & CSS Dual float property in single div

[Krygore]

I am attempting to put an image in a div that includes multiple paragraphs, that being said, I have the div set to "p class='floatLeft'" and an id tag for the image with CSS properties that float right. How can I remove the paragraph background from behind the image and have it wrap the same as the text does?

Here's my current code:

[CODE lang="html" title="Float flaw"]<div p class="floatLeft">
<img id="ms210" src="images/ms210detail.jpg">
<p>Welcome to the Backwoods Carver webpage! Inspired by carvers all over the world!</p>
<p>Work ranges from custom carved bears, mushrooms, trees, spirits, sea creatures, and more!</p>
<p>Carver designed pieces as well as commissions and requested trial pieces.</p>
<p>Click a link above to contact me, check out the gallery, or learn more about my carving hobby and how it came to pass in the about and blog sections!</p>
</div>[/CODE]

.floatLeft{
    float:left;
}

p{
    text-indent:30px;
    background:darkslategray;
    color:white;
    border-style: groove;
    border-radius:15px;
    border-color:orangered;
    padding:5px;
    margin:10px;
}

img{
    border-style:groove;
    border-width:5px;
    border-radius:10px;
    border-color:orangered;
}

#ms210{
    width:30%;
    float:right;
}

And here is my current webpage output:



I have tried creating the image in a seperate div, which only dropped it or raised it from the paragraphs, and I have tried removing the float left attribute from the div to see if the background would follow the words. It didn't.

Any suggestions are appreciated!

 

[Krygore]

So on top of the problem stated above. My href property doesn't appear to be having the desired effect in my nav block.
I have no problems with this same layout in any other pages I've created. Just this one. Is it because I colored the link and added a text-shadow?

Here's my code:

 <nav>
                    <ul>
                        <li><a href="blogHome.html" target="_parent"></a>Blog</li>
                        <li><a href="about.html"></a>About</li>
                        <li><a href="contact.html"></a>Contact</li>
                        <li><a href="gallery.html"></a>Gallery</li>
                    </ul>

nav{
    color:silver;
    text-shadow:3px 3px 5px orangered;   
}

nav ul{
    margin:5px;
}

nav ul li{
    background:linear-gradient(orangered,slategrey);
    list-style-type: none;
    display:inline-block;
    width:21%;
    padding:.5%;
    margin:.5%;
    text-align:center;
    border-radius:5px;
}

 

[Krygore]

Problem solved for href issue. User error on my part. I had the clickable text after the closing <a> tag instead of before it. Still need help with the first problem though...