WordPress.org

Forums

Inserting space between graphics? (9 posts)

  1. whask
    Member
    Posted 9 years ago #

    Sorry this is my second probobly somewhat simple question in 2 days, but I am just driving myself mad trying to get this to work.

    On my blog at http://www.skjfamily.com I am trying to make the images in my most recent post all justify to the left with the text to the right of them.

    I got the text to the right, but now the images aren't justifying to the left even though I am using the class:alignleft code.

    I'm assuming (I know!) that it has something to do with the padding?

    Any advice. Thanks to everyone who tolerates my ignorance. :)

    **sorry i just realized i opsted this under installation** tried to edit but it was too late.**

  2. moshu
    Member
    Posted 9 years ago #

    I'm assuming (I know!) that it has something to do with the padding?

    Nope. Not enough text. The "floating" elements (and the images are defined with that class as "float: left") always will go "up" until they find another element that stops them: in this case the paragpraph ending of the text. So, the text being shorter than the image... the next image 'floats' up til get stuck at the bottom of the text and goes to the left (as it's supposed to do) until hits the upper image's right side. Does it make sense?

    Sorry if all this sounds confusing :(

  3. whask
    Member
    Posted 9 years ago #

    Makes sense. I'm just now sure how to insert code or characters (that won't be displayed) that will allow the images to move down. This gives me a couple leads though. I'll try a couple things.

    Thanks.

  4. vkaryl
    Member
    Posted 9 years ago #

    You might try simply giving your post area a height in pixels. It really needs to be a min-height (which doesn't of course work in IE - piece of you know what that it is). In order to make min-height work in IE, you need minmax.js from http://doxdesk.com/software/js/minmax.html.

    Crap workaround, but that's due to IE....

  5. whask
    Member
    Posted 9 years ago #

    Thanks vkaryl, I'm gonna copy and paste your advice into a txt file I'm compiling of workarounds to keep locally.

    I did find another work around that looks like its working. Yet to view it on MOZ because we crappy IE at work, but I inserted a series of <cr> </cr>'s after the text.

    It's a crap work around too because the spacing isn't perfect (a couple of the images aren't spaced perfectly, but good enought to where it's presentable.

    I don't even know what <cr> is, I assumed its a carriage return and I though I had seen it in coding before, so I took a shot in the dark and it worked. God I am an idiot. :)

  6. vkaryl
    Member
    Posted 9 years ago #

    Well, no, not an idiot.... things like this are a PITA for most anyone.

    Wonder if the cr tags validate? I'll have to check into that.

  7. moshu
    Member
    Posted 9 years ago #

    In a similar case (listing N number of books with a small cover pic and some info text next tpo it) I gave up and just started to put every piece in a new div:
    <div> pic + text </div>
    Problem solved :)

  8. whask
    Member
    Posted 9 years ago #

    ooh, that looks way easier moshu thanks!

    I looked in firefox and the <cr> thing appears to have worked, but I think I'll go with putting each part in divs like you suggested moshu.

    Thanks everyone!

  9. moshu
    Member
    Posted 9 years ago #

    I have to add, those divs were also defined in the stylesheet, so they behaved exactly how I wanted!

Topic Closed

This topic has been closed to new replies.

About this Topic