Title: Image float:left; problem
Last modified: August 19, 2016

---

# Image float:left; problem

 *  [drinkingsouls](https://wordpress.org/support/users/drinkingsouls/)
 * (@drinkingsouls)
 * [17 years, 4 months ago](https://wordpress.org/support/topic/image-floatleft-problem/)
 * Hey.
    Im using css with float:left; so that images in posts and on pages are 
   to the left of the text. If I add an image with some text it all displays correctly,
   but if I add multiple images they display wrong.
 * The screenshot below shows two images both using the same code. They are both
   floated to the left but instead of floating one below the other the float directly
   side by side.
 * Screenshot:
    [http://img210.imageshack.us/img210/2994/imageissuebk0.jpg](http://img210.imageshack.us/img210/2994/imageissuebk0.jpg)
 * I want them to display one below the other. If I take float:left; out of the 
   css then they do so, but the text then displays below each image and not to the
   right.
 * Does anyone know how to fix this?
    Any help is appreciated, Thanks.

Viewing 15 replies - 1 through 15 (of 15 total)

 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 4 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-959899)
 * Try
 *     ```
       float: left;
       display: block;
       clear: left;
       ```
   
 *  Thread Starter [drinkingsouls](https://wordpress.org/support/users/drinkingsouls/)
 * (@drinkingsouls)
 * [17 years, 4 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960113)
 * Hey, thanks for the reply.
    I tried the code you suggested. It did put one image
   below the other, but left the text where it was.
 * See here: [http://img78.imageshack.us/img78/9506/problemuc7.jpg](http://img78.imageshack.us/img78/9506/problemuc7.jpg)
 * Any suggestions?. The way you suggested would work, only the image and the text
   are in different containers. I could try putting them both in the same container
   and doing it that way but I have no idea how.
 * Heres the source code if it helps:
 *     ```
       <div class="entry">
       					<div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="http://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
   
       <p>test here i am</p>
       <div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="http://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
       <p>test here i am</p>
       				</div>
       ```
   
 *  Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/)
 * (@otto42)
 * WordPress.org Admin
 * [17 years, 4 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960116)
 * Short of it is that with that markup, you can’t do what you want. Floating an
   element takes it out of the normal flow. So you can’t force the following paragraph
   down to the floating image.
 * You’ll need to encapsulate each paragraph and its associated image inside a div,
   and then float those div’s instead.
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960127)
 * Otto is right. The paragraph is outside the div in your example.
    Also, do you
   need the `<p>` tag? `<div class="entry">` most likely has the style for the font.
 * Can you give us the url of the page? It’s easier to tell if we look at the html/
   css live.
 *  Thread Starter [drinkingsouls](https://wordpress.org/support/users/drinkingsouls/)
 * (@drinkingsouls)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960145)
 * Hey, thanks.
 * > You’ll need to encapsulate each paragraph and its associated image inside a
   > div, and then float those div’s instead.
 * Is there no other way to do this rather than putting <div id=”leftfloatingdiv”
   >CONTENT</div> in every post?.
 * > Also, do you need the <p> tag? <div class=”entry”> most likely has the style
   > for the font.
 * No, I don’t need it but I’m not sure how to remove it!. Its not in index.php 
   where I thought it would be so it must be within wordpress somewhere. Any ideas?
 * The url to my test post with the image problem is: [http://drinkingsouls.com/wordpress/2009/01/12/test/](http://drinkingsouls.com/wordpress/2009/01/12/test/)
 * Cheers guys, appreciate the help.
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960151)
 * I will look into it and do some testing. It’s just a theme issue. Simply removing
   the <p> doesn’t do it, just tried… The solution is around the corner, hang in
   there…
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960152)
 * Good news! You just have to add float left to your entry p style
 *     ```
       .entry p {
       margin: 0px;
       padding: 0px;
       float: left;
       }
       ```
   
 *  Thread Starter [drinkingsouls](https://wordpress.org/support/users/drinkingsouls/)
 * (@drinkingsouls)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960155)
 * That seemed to be working really great for a moment there until I checked the
   same post in IE.
    In IE it still has the text aligned alongside the first image.
 * In Firefox: [http://img292.imageshack.us/img292/3288/fffq0.jpg](http://img292.imageshack.us/img292/3288/fffq0.jpg)(
   Displays Correctly)
 * In IE: [http://img147.imageshack.us/img147/2449/iegz9.jpg](http://img147.imageshack.us/img147/2449/iegz9.jpg)
 * I really can’t think of any way around this. I could try putting the post images
   and text in divs so they could have more individual styles applied?
    Have you
   any more ideas? Thanks for this.
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960156)
 * And that’s the reason why IE should be erased forever from the face of the Earth,
   and never be left to posterity to deal with…
 * Try adding the statement clear right, to see if it makes a difference in IE
 *     ```
       .entry p {
       margin: 0px;
       padding: 0px;
       float: left;
       clear: right;
       }
       ```
   
 * Let me know!
 *  Moderator [Samuel Wood (Otto)](https://wordpress.org/support/users/otto42/)
 * (@otto42)
 * WordPress.org Admin
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960157)
 * Ideally, I’d make it into an unordered list. The whole thing in a UL, and each
   image and description would be in it’s own LI. Then float the LI’s left.
 * Making CSS do what you want it to do is easier when you have the right structure
   to begin with.
 *  Thread Starter [drinkingsouls](https://wordpress.org/support/users/drinkingsouls/)
 * (@drinkingsouls)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960158)
 * > And that’s the reason why IE should be erased forever from the face of the 
   > Earth, and never be left to posterity to deal with…
   > Try adding the statement clear right, to see if it makes a difference in IE
 * Tell me about it! IE has caused me so many problems with WordPress.
    clear: right;
   didn’t make any difference. This is much more difficult than I thought.
 * > Ideally, I’d make it into an unordered list. The whole thing in a UL, and each
   > image and description would be in it’s own LI. Then float the LI’s left.
 * Have you had success doing this?. I’m up for trying but I’ll need a hand. I don’t
   know where the image and text are defined. There is no reference to the image
   in single.php or page.php
    Would I have to mess with the core code?.
 * Thanks guys.
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960160)
 * No messing with the core code. It’s just a matter of html + css.
 * Considering that you probably want to post regularly using this layout, you want
   to have the quickest workaround.
 * I was wondering if you enclose each block with image and text into another div,
   that will separate them. I can only test live in Firefox, but from what you have
   now, I was able to separate the two blocks. IE should behave similarly.
 * This way, you only have to add an extra div.
 * Try doing:
 * style.css
    `div.singleblock {float:left;}` of course, you call it whatever you
   want, and add other styling
 * and then, in the post
 * sorry I messed up by not using the backticks, I’ll retype it…
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960161)
 * and then, in the post
 *     ```
       <div class="entry">
       <div class="singleblock">
       <div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="http://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
       <p>test here i am</p>
       </div>
   
       <div class="singleblock">
       <div class="wp-caption alignleft" style="width: 70px"><img title="Hi" src="http://img514.imageshack.us/img514/3320/bandierainghilterrazu8.gif" alt="hi" width="60" height="40" vspace="15" hspace="15" /><p class="wp-caption-text">hi</p></div>
       <p>test here i am</p>
       </div>
       </div>
       ```
   
 * Theoretically, this should work.
 *  [buddha-trance](https://wordpress.org/support/users/buddha-trance/)
 * (@buddha-trance)
 * [17 years, 3 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960162)
 * Forgot.. add clear:left; to that div’s style
 *  [nachtkinder](https://wordpress.org/support/users/nachtkinder/)
 * (@nachtkinder)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960240)
 * I right now do this for every post putting a
 * `<div style="clear:both">Image - Text - whatever</div>`
 * around. This works fine and is not much work

Viewing 15 replies - 1 through 15 (of 15 total)

The topic ‘Image float:left; problem’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [float](https://wordpress.org/support/topic-tag/float/)
 * [image](https://wordpress.org/support/topic-tag/image/)
 * [left](https://wordpress.org/support/topic-tag/left/)
 * [post](https://wordpress.org/support/topic-tag/post/)

 * 15 replies
 * 4 participants
 * Last reply from: [nachtkinder](https://wordpress.org/support/users/nachtkinder/)
 * Last activity: [16 years, 10 months ago](https://wordpress.org/support/topic/image-floatleft-problem/#post-960240)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics