CSS how to execute a clear:both before background: image

  • flexon

    (@flexon)


    15 years, 3 months ago

    Just trying to figure out how I can get an article to clear:both for when the text content is shorter than the thumbnail. At the end of every entry is a hairline image that runs into the thumbnail, instead of underneath it.
    http://www.justinmontgomery.com/

    The CSS I’ve been contemplating is:
    .post {
    padding-bottom: 5px;
    margin-bottom: 20px;
    clear: both;
    background: url(images/post-line.png) left bottom repeat-x;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • ukndoit

    (@ukndoit)

    15 years, 3 months ago

    I cannot see a problem if you still have the problem you should probably take a screen shot and draw an arrow next to the problems…

    Richard

    Thread Starter flexon

    (@flexon)

    15 years, 3 months ago

    http://i56.tinypic.com/2dacbrk.jpg

    You can see the line going through the bottom of the image, skewering it like a kabob. It is more pronounced if the text content is even shorter

    Michael

    (@alchymyth)

    15 years, 3 months ago

    two possible thigs i would do:

    a:
    add the clear: both; to the style of .postmeta

    or

    b:
    add a <div class="clear"></div> after the postmeta div in index.php (or whatever template is doing the front page)

    the effects are slightly different:

    a: will have the line with ‘posted in etc’ below the image – probably a good idea if you add more tags and categories to your posts

    b: will just clear the thin backgeound line below the image, the ‘posted in etc’ stays beside the image and might be covered if you have more tags and cats.

    Thread Starter flexon

    (@flexon)

    15 years, 3 months ago

    modifying .postmeta was just what I needed, thanks alchymyth

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CSS how to execute a clear:both before background: image’ is closed to new replies.

Tags