Problem with image larger than text

  • Resolved themandril

    (@themandril)


    18 years, 5 months ago

    I searched, couldn’t find anything on this. Check out the front page at https://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…

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter themandril

    (@themandril)

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

    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.

    Thread Starter themandril

    (@themandril)

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

    https://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.

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

    Thread Starter themandril

    (@themandril)

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

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

    Thread Starter themandril

    (@themandril)

    That fixed it! Thanks so much…

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problem with image larger than text’ is closed to new replies.