WordPress.org

Ready to get started?Download WordPress

Forums

Image alignment & text wrap/flow around images (11 posts)

  1. cascajun
    Member
    Posted 5 years ago #

    I've recently upgraded from version 2.3 to 2.5 and can't seem to get image alignment and text wrap/flow to work. Could someone please take a look at my style.css and let me know what I've got wrong?

    Thanks!

    Cascajun

  2. boober
    Member
    Posted 5 years ago #

    you dont want align right, you want float right. or left. you have it in your css, but they mean nothing unless youve added the class to the image.

  3. EyePhoto
    Member
    Posted 5 years ago #

    Didn't have time to look at it in full but there is a ; missing from here (x marks the spot):

    #content {
    	font-size: 1.2em x
    	}
  4. cascajun
    Member
    Posted 5 years ago #

    Thank you EyePhoto, I fixed that.

    I have the following in my css:

    p img {
    	padding: 0; max-width: 100%;
    }
    
    img.alignright {
    	padding: 4px; margin: 0 0 2px 7px; display: inline;
    }
    
    img.alignleft {
    	padding: 4px; margin: 0 7px 2px 0; display: inline;
    }
    
    .right {
    	float: alignright;
    }
    
    .left {
    	float: alignleft;
    }

    In this linked post I have the image tag as follows:

    <img src="http://cascajun.arabie.org/wp-content/uploads/2008/04/mudda-bugs-e-300x217.jpg" alt="A Serving of Crawfish in China" title="Mudbugs in China" width="300" height="217" class="alignright" />

    The image isn't aligned left and the text isn't floating around.

  5. cascajun
    Member
    Posted 5 years ago #

    Arrggg. I mean the image isn't aligned right. It's aligning on the left.

  6. moshu
    Member
    Posted 5 years ago #

    These two:

    .right {
    	float: alignright;
    }
    
    .left {
    	float: alignleft;
    }

    should be the other way around:

    .alignright (float: right;)

    although you could simply add the floating to the img declarations...

  7. boober
    Member
    Posted 5 years ago #

    yeah, moshu is right. and you also added the wrong class to your link. why would you add the "alignright" class when the "right" class is what has the float in it?

  8. cascajun
    Member
    Posted 5 years ago #

    Ok, I think I get it. I've edited the css as follows:

    img.alignright {
       padding: 4px; margin: 0 0 2px 7px; display: inline; float: right;}
    
    img.alignleft {
       padding: 4px; margin: 0 7px 2px 0; display: inline; float: left;}

    And, in the image html tag I've included class="alignright". That got it working.

    Thank you!

  9. greatestates
    Member
    Posted 5 years ago #

    I'm having the same problem, I just created a new blog with 2.6 and my image is stuck on the left margin. I don't know anything about coding, and am not sure exactly what needs to be changed where. I'll try to see if I can edit the css file to get it to work.

    Is there a fix in the works for this bug?? If not, will I have to change every frickin image reference in the css file? What's the point of having WYSIWYG if you still have to screw around with code, which I HATE and am no good at??

    BTWW, I have 2.5 installed on most of my sites and don't have this problem.

  10. lonniw
    Member
    Posted 5 years ago #

    great estates...

    Did you get it fixed? i've been going nuts with my css for three late nights trying to trouble shoot it. I upgraded from 2.5 to 2.6 and started having those probs, too. I finally got it this afternoon. Like the posters above said, you need to have an image defined in your css. The trick is, certain themes have those imgs in diff div tags.

    I'm using prosumer-10 as my theme. Simply inserting:

    img.alignright {padding: 4px; margin: 0 0 2px 7px; border: #000000 1px solid; display: inline; float: right;}

    img.alignleft {padding: 4px; margin: 0 7px 2px 0; border: #000000 1px solid; display: inline; float: left;}

    Didn't work. My posts were still wrong. What I had to do was to insert it into the div that hosts the content of the posts, like so...

    #content img.alignright {padding: 4px; margin: 0 0 2px 7px; border: #000000 1px solid; display: inline; float: right;}

    #content img.alignleft {padding: 4px; margin: 0 7px 2px 0; border: #000000 1px solid; display: inline; float: left;}

    In my theme, the "content" div holds the post. Here's its CSS:
    #content {width: 510px;float: right;}

    So I added the img to be defined within the content div.

    Does this help you get any closer to a resolution (if you hadn't already)? Hopefully this will help some others too.

  11. japanfreelancer
    Member
    Posted 5 years ago #

    Thanks, lonniw, this did the trick for me too.

Topic Closed

This topic has been closed to new replies.

About this Topic