Support » Themes and Templates » Issue with aligning images and bits of text: SO FRUSTRATING

  • Resolved donosaur


    I have tried searching for an answer to this EVERYWHERE, but it is a little hard to describe the issue. I am using the simplicity theme.

    Basically I have three images and three little paragraphs of text that relate to them. I want to have image one aligned on the left with paragraph one wrapped around it, but paragraph one is not as, erm, tall as image one. I then want Image two to sit directly below image one, with paragraph two wrapping around image two. I need paragraph two to start below the line at the bottom of image one. Make sense? I want image three and paragraph three to do the same things.
    The problem is, when I align image one left and paragraph one wraps around it, image two starts immediately below paragraph one, so it is shifted to the right of image one. Image three then gets shoved over to the right of image two, and it makes a stupid confusing mess. How do I separate these three images so they don’t jumble all over each other?

Viewing 6 replies - 1 through 6 (of 6 total)
  • A link would be beneficial, as I could play with your css to make this happen for you.. but the general idea:

    edit your css.. you would want to insert a new class, I would likely use a span class just because.. I would then make a rule for images in that span class to get what you are looking for. Understand you could use a div class too.. but anyway the code would look something like this:

    .huh {
        display:block; /*keeps em' all on one line*/
        width:100%;    /*stretches em' across post area*/
        height:auto;   /*just because*/
        padding:5px;   /*so it's not cramped*/
    .huh img {
        float:left;    /*this makes the image appear on the left*/
        padding:5px;   /*gives you buffer between text and pic*/

    you could insert your images and text in the handy little editor box just as you would create any other post.. but before you publish you will want to flip over to the HTML tab..

    at the beginning of each paragraph and pic, you will want to add in this:
    <span class="huh">
    st the end of each paragraph and pic this:

    Like I said, that is the general idea.. I could do more for you had I that link! 🙂

    Of course, of course, I totally forgot it.

    Clear the floating after every image+text.
    E.g. add something like <br class="clearer" />
    and in the stylesheet define it:

    .clearer {
    clear: both:

    I’m afraid I’ve tried both of those options and neither has done anything. Should I be editing the rtl.css or the style.css? Where in the stylesheet do I make the edit? I am in so far over my head, I just want my page to behave in a way that’s not stupid and there’s no basic solution anywhere. The learning curve here is like a vertical stone cliff.

    alright, I somehow made it work. I put <div style=”clear:both;”> picture, paragraphs</div> and threw
    .clear {
    clear: both:
    up all over my stylesheet and something stuck. Thanks for the advice guys, maybe someday I’ll have a clue of what I’m doing.

    Hi. I am having the same problem. Can someone tell me why this occurs… the dis alignment of images when “left” was chosen and the misalignment of the text that is set to wrap?

    my page:

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Issue with aligning images and bits of text: SO FRUSTRATING’ is closed to new replies.