Support » Themes and Templates » Floating images crossing my post’s bottom border

  • Resolved jacoblindblad


    Hi there.
    I’m still a newbie in this, so be gentle on me.

    I defined in my stylesheet that all images posted should be using the float: right; function.

    To graphically define each post, I’m using a 20px black border.

    My problem is that the text next to the picture usually is very short, which then results in the picture crossing the bottom border.
    I tried the <br> and the   to bring the textarea and borderline down, but somehow it doesn’t help.

    I would love to find out what’s causing this, but I’m not that good at numbers or troubleshooting.

    Check it out here:

    Oh, I’m using the Kubrick theme, btw..

    Thank you for any help!

Viewing 10 replies - 1 through 10 (of 10 total)
  • Moderator Samuel Wood (Otto)

    (@otto42) Admin

    Try adding clear:right; or clear:both; to the .postmetadata definition.

    Also, close the postmetadata paragraph properly.

    OMFG! It totally worked! Thank you so much!!

    Now I just have to figure out how to remove the same problem with the pages on the blog.. The postmetadata doesn’t apply to them..

    What did I miss?

    Oops, people won’t know what I’m talking about:

    Sorry.. And thanks!

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    You’ll have to edit those page templates to have another paragraph after the “entry” div. If you give it a class of postmetadata, then you’ll have the same effect.

    The “clear” property basically says that no floats can be on the left, right, or both, of that item. So by making an empty paragraph with clear:right, it will force it to move the paragraph down below the floating image, thus forcing the bottom of the “post” div down with it.

    Okay, as said before, I’m a newbie. I’m not quite sure what to do:

    In my page template file “page.php” after the <div class=”entry”> tag, I type this (?):

    <div class=”postmetadata”>

    It then transforms all pages to having centered, grey text, and the pictures stay the same way.. Where do I locate these informations to alter them? It must be somewhere in my stylesheet, right?

    Okay, this really puzzles me. I’ve been sitting with it intensely for an hour, and nothing changes.
    I found the class called “narrowcolumn .postmetadata” in my stylesheet, and if I change the things in here, I get results: Black text instead of grey, left text instead of centered..

    But I cannot change anything about those damn pictures! They stay where they are, crossing my bottom border.

    I tried putting the clear:both; thing in everywhere I could find the words “narrowcolumn”, “entry” “post” “postmetadata” (’cause they’re all there in the page template) BUT NOTHING HAPPENS!

    And I thought that the tag .postmetadata would kinda automatically be recognized as the one with the info to put the pics in their places..

    What to do?


    Okay. I found out.

    Had to write, in the page.php:

    <div class=”narrowcolumn .postmetadata”> to make sure it found the right path.

    Sometimes I’m kinda dumb. Thanks for the help, though!

    Moderator Samuel Wood (Otto)

    (@otto42) Admin

    Umm.. Okay.

    1. Stop changing anything.
    2. Go to the bookstore.
    3. Find a book that mentions “XHTML” and “CSS”.
    4. Buy it.
    5. Read it, cover to cover.

    Seriously, there’s so much wrong with your posts above, that I don’t know where to begin. So i’d have to say that before you go modifying things, it might be a good idea to get the basic background necessary to understand them. So go learn HTML and CSS and then you’ll get why you weren’t doing it right.

    Sorry. Mr. Mean.. Stop intimidating..

    “What to do?”

    Learn the basics. Books are good. This should suit you, according to what some existing readers seem to be saying.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Floating images crossing my post’s bottom border’ is closed to new replies.