Wrapping text Around Images

  • Resolved brianbonner

    (@brianbonner)


    19 years ago

    Ok now I have a new problem. Wrapping text around images. I followed the tutorial and added this to the .css:
    p img { padding: 0; max-width: 100%; }
    p.center { text-align: center; }
    p.right { text-align: right; }
    p.blue { color: blue; }
    p.red { color: red; }
    p.green { color: green; }
    p.purple { color: purple; }
    p.black { color: black; }
    img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    img.center {display: block; margin-left: auto; margin-right: auto}

    I used this code in the post:
    <img src="/wp-images/nativity.jpg" alt="Nativity Scene" class="left" />
    Now this works great when looking at it in Firefox, but in IE the image is blank. What gives?

    You can see the post here:
    https://uncooperativeblogger.com/2005/12/01/the-war-on-christmas/

Viewing 6 replies - 16 through 21 (of 21 total)

  • I’m still looking for an answer on this, none of the things recommended here have worked for me. I’m trying to add an image on my About page at https://www.solegoal.com and have the text wrap around to the left of it, any suggestions?

    moshu is correct – if you want your image to be on the left, and the text to wrap around the right side, you have to have this:

    img.left {
    float:left;
    margin: 0 5px 5px 0;}

    and yout HTML:

    <img src=”image” class=”left”>

    This will give your image 5 pixels padding on the right side and the bottom, and the text will wrap around the image. No “position:relative;” needed – not even for IE.

    However, for IE – the fact that you used “display:inline” is why you need that relative positioning. Floats work just as well for IE as they do for any other browser (amazingly) – and they are for this type of purpose. That’s all you need.

    Have I understood everything right if I say I still have to edit each imported image and write class=”left” even if I use this tips above?

    Im in need of the same function – but without writing anything. I want to introduce this to some very lowtech people – and I think the left and right align buttons is just enough advanced. Is there no way to let the buttons automatically apply class=”left” if I for example mark the image and push the align left button?

    I’m using this technique on my blog and it works fine for IE but for Firefox it doesn’t work. It puts my image way down on the page. I can’t figure out why. If anyone has any ideas please let me know. I’m using Firefox 2.0b2 so it’s possible it’s a bug.

    https://www.michaelmattox.com/blog/2006/09/30/the-post-office-is-a-bank/

    in my blog entry:

    <img class=”left” id=”image12″ src=”https://www.michaelmattox.com/blog/wp-content/uploads/2006/09/la-banque-postale-logo.png&#8221; alt=”La Banque Postale Logo”/>Well it is in France at least. I kind of forget this fact….

    and in my css:

    img.left {
    float:left;
    border: 0px;
    margin: 5px 10px 0px 5px;
    }

    I figured out the problem, I submitted a bug for firefox but I’m not sure if it’s a bug or just not specified in the css specs.

    the solution was to put all my divs that float right inside a containing div and float that one.

    hope this helps someone..

Viewing 6 replies - 16 through 21 (of 21 total)
  • The topic ‘Wrapping text Around Images’ is closed to new replies.