[resolved] Floating images crossing my post's bottom border (11 posts)

  1. jacoblindblad
    Posted 8 years ago #

    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!

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

    Also, close the postmetadata paragraph properly.

  3. jacoblindblad
    Posted 8 years ago #

    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?

  4. jacoblindblad
    Posted 8 years ago #

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


    Sorry.. And thanks!

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

  6. jacoblindblad
    Posted 8 years ago #

    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?

  7. jacoblindblad
    Posted 8 years ago #

    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?


  8. jacoblindblad
    Posted 8 years ago #

    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!

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

  10. jacoblindblad
    Posted 8 years ago #

    Sorry. Mr. Mean.. Stop intimidating..

  11. Pizdin Dim
    Posted 8 years ago #

    "What to do?"

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

Topic Closed

This topic has been closed to new replies.

About this Topic