unable to wrap text around an image

[tony webb]

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;

#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?

[cbVision]

It looks like your image is inside a paragraph tag. You either have to float the paragraph or simply remove the image from the paragraph.

[tony webb]

Thanks for that. It worked!

[auntnini]

WRONG //comment (that's JavaScript to end-of-line) used within <script> code can wreck your CSS.

Use /* comment */ for CSS

==========
see code at http://www.webdeveloper.com/forum/sh...d-text-element

[tony webb]

I should have said, but the comment marks were inserted for the thread and are not in the file.