I am trying to wrap text around an image by using float: left; for some reason the text aligns underneath the image and the background overflows the border.

this is the css code;

Code:
#main-box {               ///for the border and background
    padding-bottom: 20px;
    background-color:#fff;
    margin-left: 15%;
    margin-right: 15%;
    padding: 10px;
    border-color: #d5d6ff;
    border-style: outset;
    border-width: 4px;
    text-align: left;
    font-family: arial,san-serif;
    font-size: 1.25em;
    color: black;
  }
#main-box img.align-left {  // for the image
    float: left;
    }
#texted-1 {                   //// for the text 
    background-color:#fff;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    font-family: arial;
    font-size: 1.00em;
    color: black;
}
You can see the result here

What do I need to do to get the text to align around the image correctly?