[resolved] Posts in the two column layout not flowing, positioning is off sometimes (5 posts)

  1. alessia_e
    Posted 4 years ago #


    I've created a blog for a friend that looks like a magazine. My issue is that sometimes because of the nature of how long/short the posts are, the containers do not align properly and appear to be irregular. I've had problems with this design from the beginning, and have no clue how to fix this. Any suggestions are welcome!

    Please take a look at the site & you will see right away what I am referring to. I think there is probably an easy solution to this, but it seems to escape me.

    Website: http://www.shalasrabbithole.com/blog

  2. Digital Raindrops
    Posted 4 years ago #

    You have 83 html errors, that would be the place to start looking.

    Run your url through the W3C Markup Validation Service there is no charge, select show source and you will see the lines that are with errors.

    You have used the id="wrapper" a number of times this needs to be a class="wrapper" and the style.css .wrapper instead of #wrapper.

    An id has to be unique and can only relate to one element on a page where a class can be repeated a number of times.

    blog-header will be an id, where as post-header will be a class.

    Sort out these and I think your problem will resolve.

    Nice theme by the way.



  3. esmi
    Forum Moderator
    Posted 4 years ago #

    You'll need to set a fixed height and an overflow:hidden on each post to keep the box dimensions the same.

  4. alessia_e
    Posted 4 years ago #

    Thank you A, I fixed the DIV IDs and the errors are "better" now.. But still my problem continues.
    After some research, I am pretty sure it has something to do with floating containers, that is why the alignment is off. I am playing around with the code, but so far nothing. Any suggestions would be helpful!

    This is my current loop for the two column boxes:

    [Code moderated as per the Forum Rules. Please use the pastebin]

  5. alessia_e
    Posted 4 years ago #

    OK, apparently I just solved my own problem (again on this blog, twice now!) without much knowing what I did... Just copied & pasted a similar code I used for inspiration for creating my blog (Magazeen, on Smashing Mag website).

    Here is the new code, in case anyone is looking for solutions:

    [Code moderated as per the Forum Rules. Please use the pastebin]

Topic Closed

This topic has been closed to new replies.

About this Topic