POST'S SIDE BY SIDE

• 

  haakonroe · Member · Jun 26, 2013 at 10:44 am

  • Copy link
  • Add topic to favorites

  How to get two post side by side like this http://www.frontsidefly.com/?
  I have a Twenty ten theme and very new to coding

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Jun 27, 2013 at 1:45 am

  • Copy link

  That’s not just “two posts side by side”, it’s the masonry layout, and there’s no point in trying to simulate this on Twenty Ten: select a theme that already uses the masonry layout – for example Imbalance 2 or Visual.
  Or you might be interested in a grid layout theme – for example Suburbia or The Columnist.
  There are also themes that literally do/can display two posts side by side – for example Chateau or Inuit Types.

  You can read about all themes and see them in action here:
  http://theme.wordpress.com/
  (Careful: some themes have multiple layouts, so some demos are one version only).

• 

  designsimply · Member · Jun 28, 2013 at 3:38 pm

  • Copy link

  There is not a way to make a theme that isn’t already using the masonry script justpi mentioned unless it’s already built into the theme, but you could make the posts into a grid if you wanted.

  Here is an example you can start with:

  .home .hentry {
  	border: 1px solid black;
  	border-radius: 8px;
  	width: 29%;
  	margin-right: 1%;
  	padding: 1%;
  	float: left;
  }

  That will give each post on the home page a border and make it about 1/3 the width of it’s container element.

  To take that example a bit further, you can add some padding on the container element to make the spacing a little nicer, update the font size for post titles so they fit better inside the boxes, and make the images a bit smaller to they don’t fall over into the box margin areas:

  .home #content {
  	padding-left: 3%;
  }
  
  .home .hentry .entry-title a {
  	font-size: 75%;
  }
  
  .home .hentry img[class*="align"],
  .home .hentry img[class*="wp-image-"],
  .home .hentry #content .gallery .gallery-icon img {
  	max-width: 92.5%;
  }