WordPress.org

Ready to get started?Download WordPress

Forums

Image Aligned Left in Paragraph and Aligned Right in Paragraph Two (7 posts)

  1. bk12345
    Member
    Posted 1 year ago #

    I would like to enable someone usnig my theme to have an image aligned to the left with text aligned to the right in paragraph one and then an image aligned to the right and text aligned to the left in paragraph two using the visual editor.

    At the moment, the text and image from paragraph two and moving up and interferring with paragraph one. I want them to be below the image from paragraph one.

    Does anyone have any tips for making this happen? The only way that I can do it from the visual editor is to press enter several times which creates several empty paragraphs in the code and so pushes down paragraph two. I would not have to make the person using the theme do this though.

    Unfortunately, I cannot post a link to where this is happening.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    If you use the "float" and "clear" attributes in CSS -- it does what you describe:

    http://codex.wordpress.org/Using_Images

    http://www.w3schools.com/css/css_float.asp

  3. bk12345
    Member
    Posted 1 year ago #

    Thanks for your message :)

    I should have said, the image in paragraph one has a float of left and the image in paragraph two has a float of right.

    Where would you recommend using clear? Would you recommend using clear: both or something else?

  4. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Depending on the content, if the paragraphs/images are getting out of alignment, clear can be helpful. Basically, when you use float -- the element is taken out of the regular flow of elements on the page -- so that's what lets the text go up to the side of the image. Clear is used after a floated element -- so that the following content goes below the floated element -- not to the side of it. Hope that makes sense. So maybe try putting clear: both on the paragraphs that are "interfering" with the content above? You might also be able to do it using the pseudo-class after: http://www.w3schools.com/css/css_pseudo_elements.asp

    (It's a bit hard to know exactly how to address your issue without seeing it...)

  5. bk12345
    Member
    Posted 1 year ago #

    Thanks for your very informative replies, WPyogi :) Do you know if its possible to add clear to a paragraph via the visual editor?

    I have looked around but can't see anyway of doing it and need to find a solution to the problem described in my initial post without having to use the HTML editor.

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    You should be able to add CSS -- attaching to the paragraphs via a class or id. Depending on how your theme is coded, there may already be existing places to do it -- but it's hard for me to say without seeing it. How much CSS do you know? The site I linked to is a pretty good and useful resource -- look around there for the section on selectors -- which will give you the basics.

  7. cdukes
    Member
    Posted 1 year ago #

    Check out clearfix: http://nicolasgallagher.com/micro-clearfix-hack/

    If this is for personal use, you can use do <div class="clearfix"></div> between the paragraphs in the editor.

    For a larger audience, you may want to use a shortcode.

Topic Closed

This topic has been closed to new replies.

About this Topic