unable to wrap text around an image
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?
