Post Display Problem

  • I’m seeking help for a solution to a post display problem.
    I need to include an image with the text in a post. To do so I have placed the image and txt in a two column table with the image on the left and the text on the right. When the post is published it works fine but the next post below the top one creeps up into its space and so on down the line. The posts should all be left aligned but instead the posts are acting like a directory/sub-directory tree. It is as if there is not a full break between posts. You can see the problem here: https://www.fetal.ca
    Can someone please tell me what is wrong and how to fix it?
    Thanks for any help.

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

  • This may help:
    https://www.tamba2.org.uk/graphicalcss/align/index.html

    Thread Starter Tons

    (@tons)

    Thanks for the quick help and the links podz.
    I checked the info out, downloaded the tools, added the stuff to the css and installed the additional quick tags. BTW the “drop shadow” quick tag is really neat.
    The changes fixed the problem of the posts displaying as a directory tree. Everything is now left aligned BUT (the always proverbial “but”) … the text in the posts is not married to the images in the respective posts. The text from all posts creeps up on the right to enter into the space made by the images from the upper posts.
    The problem can be seen here: https://www.fetal.ca ie “Baby 2” text should be positioned to the right of the second baby image. Instead it rises on the right to enter the “Baby 1” text area.
    Surely there must be some simple code, command etc. to make a break between one post and the next post?
    Any help on getting this fixed is appeciated.

    https://weblogtoolscollection.com/archives/2004/04/12/image-alignment-drop-shadows/
    might help…

    Have you tried adding the ‘clearer’ div between each image ? Or immediately after each image tag ?

    Thread Starter Tons

    (@tons)

    Thanks guys.
    podz – I have not tried tried adding the ‘clearer’ div. I don’t know what that is – as I’m not at all familiar with css stuff. Thank my whatever deity for the help I have got already with css here at the forums so far and the great online tutorials.
    Is this a ‘clearer’ div tag that should be placed around the image?
    <div class=”clearer”>the image url etc</div>
    and does there have to be some “clearer div” stuff put into my css file to make it work?
    thanks for your ongoing help.

    If you see about 1/3 of the way down from the page above – the section “On the left with text wrap” there is the clearer div. You will need to copy and paste that into your wp-layout.css and use it as shown in the tutorial.
    What I would try is this:
    –image tag–
    –clearer div–
    –text to go with image–
    and repeat. (just do it for 2 images, it’ll be apparent if it works or not)
    If that does not work, try:
    –image tag–
    –clearer div–
    –text to go with image–
    –clearer div–
    again repeat and see what gives.
    I’ve never used multiple images in a posting like the one at ‘fetal’ so I’d say some more playing with the code is still needed.

    Thread Starter Tons

    (@tons)

    Thanks again. The clearer div works. For anyone else who needs help with this, I found an additional resourse explaining floats and images at:
    https://www.complexspiral.com/publications/containing-floats/
    There is some css code there that installs an invisible horizontal line to force the next image below the first one.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Post Display Problem’ is closed to new replies.