www.webdeveloper.com
Results 1 to 5 of 5

Thread: unable to wrap text around an image

  1. #1
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125

    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?

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    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.

  3. #3
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    Thanks for that. It worked!

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    267
    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
    Last edited by auntnini; 10-08-2012 at 06:56 PM.

  5. #5
    Join Date
    Jul 2012
    Location
    Vantaa, Finland
    Posts
    125
    I should have said, but the comment marks were inserted for the thread and are not in the file.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles