WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Issue sorting posts in to two columns. (7 posts)

  1. mfux
    Member
    Posted 3 years ago #

    Hi,

    I am currently coding a theme and wish to put the recent posts on the home page in to two columns, my code is below, along with the relevant CSS:

    [code moderated - http://codex.wordpress.org/Forum_Welcome#Posting_Code ]

    CSS:

    #left-column {
    	width: 350px;
    	float: left;
    	clear: none;
    	}
    #right-column {
    	width: 350px;
    	float: right;
    	clear: none;
    	}

    Thanks for any help, the site is currently not online, however, if it is required in order to resolve this issue then I will do so.

    The issue is, everything that should be in the left column is appearing on the first row, all floated left, with the proceeding row being the items which should be in the right hand column, rather than a row.

  2. alchymyth
    Forum Moderator
    Posted 3 years ago #

    add the html div tags after the if(have_posts()): and close them before the endif;

    at the moment, each post is wrapped in a div.

  3. Digital Raindrops
    Member
    Posted 3 years ago #

    This assumes you need two columns of posts and not the post in two columns of text.

    If you are using a recent theme then try to use percentages like width: 49.8%; rather than fixed widths.

    You should use a class and not an ID # as they will be repeated, to maintain the posts maintain the same hieght side by side you need the clear: both.

    .one{
    	clear: both;
    	margin-right: 7.6%;
    }
    .column{
    	float: left;
    	position: relative;
    	width: 46%;
    }

    Inside the loop you need to wrap each post in the .column div adding the class .one to the left column.

    Here is sample untested code for twenty eleven index.php, look in the sample for Two Column comments.

    http://pastebin.com/b9bq6Gc7

    HTH

    David

  4. mfux
    Member
    Posted 3 years ago #

    Thanks for your reply, however I am still having an issue. I have placed the </div> before the endif;, however now it produces everything in one single column, rather than 2 columns side by side.

    The amended code can be found here: http://pastebin.com/SCK5GMiF

    Edit: Just seen second reply, will try this out too.

    Ok, I have tried the above solution and I get my posts in a T shape which has been rotated 90 degrees anti-clockwise.

    Code: http://pastebin.com/MzEbC20h

  5. Digital Raindrops
    Member
    Posted 3 years ago #

    For your code the left-column needs the style element clear: both;

    HTH

    David

  6. alchymyth
    Forum Moderator
    Posted 3 years ago #

    slight correction of you last http://pastebin.com/SCK5GMiF pastebin:

    http://pastebin.com/4QE4fGzb

    moved the corresponding divs to the right positions (to after the 'if(have_posts()):' and to before the 'else :'.

  7. mfux
    Member
    Posted 3 years ago #

    Thanks a lot guys, alch, that last tip was the final thing I needed. Again, thanks for your help, it is very much appreciated. I have been killing myself over this for a few hours trying to figure it out. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic