Support » Themes and Templates » How to … multiple paragraphs of text and floated images?

  • Resolved Psylicium


    Hi there. I have been struggling with this for a couple of hours now, and I don’t quite know how to solve it…

    On my page, I want to have photos of 4 persons, each with a description. The photos are floated to the left, so the text wraps around. However, I can’t seem to clear the floats, so that each new paragraph starts on a new line, and the following photo gets floated right.

    This is what it looks like now:

    – and this is what I want it to look like:

    I have tried solutions where people suggested to add clearing <div> or <hr /> into the html editor, but the users of this site isn’t very tech savvy, so it should be as straight forward as possible.

    My CSS:

    	float: left;
    	background-color: #eeeeee;
    	border: 1px solid #dddddd;
    	font-size: .8em;
    	padding: 5px;
    	margin-right: 10px;
    .wp-caption img
    	width: 100px;
    	height: 133px;
    .wp-caption p
    	margin-bottom: 0px;
    	border: 1px solid;
Viewing 7 replies - 1 through 7 (of 7 total)
  • WPyogi


    Forum Moderator

    Can you post a link to your site where this problem is?

    Moderator Andrew Nevins


    Forum moderator

    Add a clear left to .wp-caption.

    To then get your desired alignment, you need a html structure whereby you have <div>s surrounding your rows of information.

    <div class="wp-caption alignnone" style="width: 85px"><img class="   " title="Animal" alt="" src="" width="75" height="100">
     <p class="wp-caption-text">123</p>
     <p>This is your main text that is aside the image, to the right.</p>

    At the moment, the exampled text, “This is your main text” is outside of the closing </div>.

    This is not a WordPress issue, but a general HTML and CSS issue.

    This is not a WordPress issue, but a general HTML and CSS issue.

    Thanks for your reply, Andrew. I see the problem with the div, but technically it is a WordPress issue, since the <div>s aren’t placed as they should be regarding floats. I have tried assigning both the “alignnone” and “alignleft” classes to the images, but the output code is exactly the same. I would assume that if you use the class “alignleft” to the image, WP would throw a clear: left; into the “wp-caption” and enclose the entire paragraph in a <div> (or something like that)…



    Forum Moderator

    No, WP does not (and should not) add extra styles or HTML. Perhaps a THEME should do that, but that’s a different question. If that’s a theme you are building, incorporate that structure/styling into your theme.

    Thank you for the replies. I got it sorted out now. I followed this tutorial, and got rid of the image captions. So far it seems to be working 🙂


Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to … multiple paragraphs of text and floated images?’ is closed to new replies.