Aligning an image with text wrapping around it

Discussion in 'CSS' started by Austars, Jan 17, 2007.

  1. #1
    Hello everyone, right now I'm trying to get images to align to the left of my blog and have the text wrap around them, but for some reason I can't get it to work. I'm using a float, although I'm not really sure what exactly that means, shouldn't the text wrap, at least from what I've read? Any help is appreciated.

    Here is the link to my blog: http://wii-mario.com
    You can see in the most recent post that the small picture is separating the text, and I want the text to surround it.
     
    Austars, Jan 17, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    Make this section just as I show it:
    
    .main p img {
        border: none;
        margin: 0 2px 2px 0;
        padding: 0 2px 2px 0;
        float: left;
        }
    Code (markup):
    cheers,

    gary
     
    kk5st, Jan 17, 2007 IP
    Austars likes this.
  3. Austars

    Austars Active Member

    Messages:
    1,437
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    95
    #3
    Thanks so much! Although now, if you'll look, all the text below the post goes to the side of the large image. Do you know how to fix this? I was looking at the w3 site, do I need to use the clear tag?
     
    Austars, Jan 17, 2007 IP
  4. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #4
    I assume you're talking about IE. You also have additional problems in Firefox.

    Start by getting Firefox right. IE is too screwed up to use it as a test bed. Once FF is good, you can fix IE stupidities, assured that the base code is good.

    See Enclosing Float Elements for methods of dealing with floats.

    cheers,

    gary
     
    kk5st, Jan 17, 2007 IP