WordPress.org

Forums

Image float:left; problem (16 posts)

  1. drinkingsouls
    Member
    Posted 6 years ago #

    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

    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.

  2. buddha trance
    Member
    Posted 6 years ago #

    Try

    float: left;
    display: block;
    clear: left;
  3. drinkingsouls
    Member
    Posted 6 years ago #

    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

    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>
  4. 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.

  5. buddha trance
    Member
    Posted 6 years ago #

    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.

  6. drinkingsouls
    Member
    Posted 6 years ago #

    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/

    Cheers guys, appreciate the help.

  7. buddha trance
    Member
    Posted 6 years ago #

    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...

  8. buddha trance
    Member
    Posted 6 years ago #

    Good news! You just have to add float left to your entry p style

    .entry p {
    margin: 0px;
    padding: 0px;
    float: left;
    }
  9. drinkingsouls
    Member
    Posted 6 years ago #

    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 (Displays Correctly)

    In IE: 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.

  10. buddha trance
    Member
    Posted 6 years ago #

    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!

  11. 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.

  12. drinkingsouls
    Member
    Posted 6 years ago #

    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.

  13. buddha trance
    Member
    Posted 6 years ago #

    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...

  14. buddha trance
    Member
    Posted 6 years ago #

    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.

  15. buddha trance
    Member
    Posted 6 years ago #

    Forgot.. add clear:left; to that div's style

  16. nachtkinder
    Member
    Posted 5 years ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Topic