WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Problem with image larger than text (8 posts)

  1. themandril
    Member
    Posted 8 years ago #

    I searched, couldn't find anything on this. Check out the front page at http://www.takingoverhollywood.com and you'll see the problem. No matter what theme or how much playing I do with the code, I can't seem to find a way to make it move the post meta to the bottom of a post if the picture is larger than the text. You'll see that I have a line that runs across the bottom of the post, then the post meta. But since the images is taller than the text, the line runs across the middle of the image, instead of the bottom.

    Any ideas on how to solve this? It's driving me nuts. Thank you...

  2. themandril
    Member
    Posted 8 years ago #

    I tried more ideas from other boards, still nothing. This is a tough one.

  3. newflesh
    Member
    Posted 8 years ago #

    try adding clear: both; (or left/right if you only align images to either side) to the .details class in your stylesheet.

    In some cases it can mess up the layout completely, depending on if and how other elements above are floated, but it's worth a try.

  4. themandril
    Member
    Posted 8 years ago #

    I can't seem to make that do it. If you look at some blogs, like this one:

    http://www.boingboing.net/2006/07/08/automated_stabby_dol.html

    You'll see what I mean, the post meta is below the pic, even if the text is smaller than the pic. I know there has to be a way to do it, I just can't figure it out.

  5. flakkito
    Member
    Posted 8 years ago #

    its in the css. Try adding a < br /> tag after the image?

  6. themandril
    Member
    Posted 8 years ago #

    The break tag doesn't do it. I wonder what exactly to do in the css to make it work?

  7. newflesh
    Member
    Posted 8 years ago #

    Don't know what you tried, but to elaborate the css change I suggested... in your stylesheet you have the following:

    .story .details{
    margin:1em 0;
    text-align:right;
    border-top:1px solid #333;
    padding:0.5em 0;
    font-size:0.95em;
    color:#666;
    }

    With the suggestied line added it would be:

    .story .details{
    margin:1em 0;
    text-align:right;
    border-top:1px solid #333;
    padding:0.5em 0;
    font-size:0.95em;
    color:#666;
    clear: both;
    }

    That should put the meta beneath the image.

    The solution at boing boing seems to be to manually insert <br clear="all"> at the end of the post. Maybe a bit crude, but I guess that works too. :)

  8. themandril
    Member
    Posted 8 years ago #

    That fixed it! Thanks so much...

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags