SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face 3 column layout height help needed :)

    Hey everyone!

    I'm busy trying to put together a 3x3 magazine-style layout for the home page of my blog.

    I want the divs containing each post to flow vertically so there aren't big white spaces beneath each row of 3. It seems like the easiest way to do this would be to have three columns and fill each of these (which will stop there from being a big space beneath each post-block) and then place these three columns side-by-side.

    The problem is that the wordpress loop needs to pull posts sequentially. I don't know how to change the order of the wordpress loop and, even though I've tried some PHP trickery using counts and for loops, I can't seem to get it to work.

    Any thoughts / advice on a basic wordpress loop / css way to make it work would be muuuuch appreciated as it's driving me crazy!

    I've attached an image to illustrate what i'd like

    You can see how it is currently at http://www.unleashreality.com

    Thank you and have a great day!
    Alex
    help.jpg

  2. #2
    Non-Member
    Join Date
    Feb 2011
    Location
    India
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi,

    I review the website and there is a simple solution for that, you just go in Style sheet at line number 47 and fix the height at div.post-block, so the post height should be same for all.

    Regards
    Amit

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,769
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by unleashreality View Post
    I'm busy trying to put together a 3x3 magazine-style layout for the home page of my blog.

    I want the divs containing each post to flow vertically so there aren't big white spaces beneath each row of 3. It seems like the easiest way to do this would be to have three columns and fill each of these (which will stop there from being a big space beneath each post-block) and then place these three columns side-by-side.

    The problem is that the wordpress loop needs to pull posts sequentially. I don't know how to change the order of the wordpress loop and, even though I've tried some PHP trickery using counts and for loops, I can't seem to get it to work.
    Your HTML creates rows using DIVs which prevents you from ever doing what you want to do. There will be no CSS option for you without a rewrite of your templates that output the HTML. I don't know if there is a CSS-only option that would be able to do what you wanted to do. Paul O'B here at Sitepoint might know.

    As for creating a loop using PHP to do what you want to do, yes that would be possible. A way would be to unwind the posts array Wordpress creates using a loop and put the posts into three separate arrays for each column.

    You could have a counter inside the loop keeping track of which column you are on (1, 2, or 3), incrementing on each iteration. An if condition tests which iteration the counter is on and if it reaches 3, the counter is reset to one.

    When the loop is on 1, an array such as $col1[] is set equal to the post. Using the brackets without an index will automatically index the array so you don't need to. $col2[] is set equal to the post when the counter is on 2, $col3[] is set equal to the post when the counter is on 3, and when the counter reaches 3 the loop is reset at the bottom to 1. The counter isn't the control for the loop.

    I've never tried anything like this, but I know it can be done. There is always a way. I'm not familiar enough with how to interface with Wordpress' posts to do this. But it can be done.

  4. #4
    SitePoint Addict
    Join Date
    May 2005
    Posts
    242
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    It looks like you've gotten it fixed, if what I understand you wanted to do. Yes? If so, what was the solution?
    I'm intrigued by what you've done altogether and would like to develop something like it.
    Could you please share some of the key points you've done? I'd like to try to integrate those with my limited understanding of the PHP and way WP connects with it.
    Thanks for your consideration.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •