5 {{ upvoteCount | shortNum }}
5 {{ upvoteCount | shortNum }}

CSS help needed to put wordpress posts into multiple columns

by Manda
3 replies
  • WEB DESIGN
    • |
Hi,

I've been playing around with a wordpress design that puts the front page posts into two columns.

I've almost have what I want just using CSS but am having a problem with the vertical spacing. While the spacing on the second column on the right is fine, the column on the left has large white gaps.

I tried using two separate loops with two divs - one floated left and one floated right but I still had the same spacing problem.

Can anybody tell me if there is a way to force the posts to sit on top of each other and get rid of the white space?

The site is greenbusinessnotebook.com and this is the CSS for the two columns:

.postfrontpage{
width: 250px;
float: left;
text-align: justify;
margin: 0px 10px;
}

Thanks
Manda
#columns #css #multiple #needed #posts #put #wordpress
  • Profile picture of the author tanshi
    Manda, your CSS is ok, but you get those gaps because the blocks form the posts have different heights.

    Try putting into them images with the same sizes and display the same amount of text before the "Read more..." (eg: display only the first 200 characters)
    Signature

    The best things in life aren't things

    {{ DiscussionBoard.errors[2106477].message }}
  • Profile picture of the author Manda
    Hi Tanshi,

    Thanks for your response. My problem is I really don't want to make the post excerpts the same length. Ideally I would have two columns for the main posts that could cope with content of different lengths. Any ideas?

    Manda
    {{ DiscussionBoard.errors[2108812].message }}
    • Profile picture of the author sovarn
      What browser are you using? Have you tried a different browser? floats can do funny things to different browsers.

      got a link to the problem?
      {{ DiscussionBoard.errors[2110778].message }}

Trending Topics