Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Montezuma Theme »

Fitting two equal width columns inside a 9-column wide area

Old Aug 12, 2015, 06:02 PM
flyboy's Avatar
115 posts · Sep 2010
I got a weird layout I'm trying to fit into Montezuma, so I'm hoping to brainstorm some ways to pull this off.

The design uses 3 columns for a sidebar, and 9 for the loop:

The problem is that on the desktop view, the loop has two columns of posts (columns 4-12 on the picture above). And since 9 is not divisible by two, I'm scratching my head a little.

One of the ideas was to create an additional 2-colum custom grid, most likely percentage-based, and fit it inside the 9-column area. Then I could assign that to the desktop viewport alone.

But even with that solution, how do I float odd posts to the left and even to the right? (I checked the code and there are no odd/even classes applied to the post containers)

Any ideas?
Old Aug 13, 2015, 04:57 AM
juggledad's Avatar
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
why not make the sidebar 4 or 2 columns?
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
Old Aug 14, 2015, 03:33 PM
CrouchingBruin's Avatar
299 posts · Aug 2010
Santa Monica, CA
You don't need to make a new grid, just use CSS to tile your posts. The basic CSS would be something like this:
.blog .hentry {
  width: 49%;
  float: left;
.blog .hentry:nth-child(odd)
  clear: both;
  margin-right: 2%;

@media only screen and (max-width: 480px) {
   .blog .hentry {
     width: 100%;
     float: none;
The first rule sets the post entries to 49% wide, so it takes up half the space of the content div (I didn't make it 50% because I wanted to add a margin of 2% to the right of the left-hand posts). The second rule uses the odd keyword to make sure the posts on the left "clear" from the row above it, and adds a margin for spacing from the post next to it. The last rule resets the width to 100% around a cell phone size, so the posts aren't tiled anymore.

There's a demo page here.
My Montezuma-themed sites: ESHS Girls Basketball Team, Venice Hongwanji Buddhist Temple
Please consider making a donation to BytesForAll for their great themes!

Last edited by CrouchingBruin; Aug 14, 2015 at 03:38 PM.
Old Aug 15, 2015, 04:15 PM
flyboy's Avatar
115 posts · Sep 2010
Originally Posted by juggledad
why not make the sidebar 4 or 2 columns?
I would but that's not what the client approved

Originally Posted by CrouchingBruin
You don't need to make a new grid, just use CSS to tile your posts. The basic CSS would be something like this...
Awesome. I modified that somewhat to keep the images from bursting from their containers, and set the min-height for the containers themselves, so they line up nicely side-by-side. Lookin' great!

Thank you =)


column width, grid layout

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Configuring a wide Right Column with Alternating full column and two-column New WordPress Fan Forum How-To 2 Aug 15, 2010 11:47 PM
How can I have my category widget display in two equal columns? barros1389 Page & Category Menu Bars 3 Nov 11, 2009 06:45 PM
[SOLVED] Page Menu Sub Menus of Equal Width Craig Mattice Page & Category Menu Bars 4 Jun 17, 2009 03:46 AM

All times are GMT -6. The time now is 03:18 AM.

Powered by vBulletin® Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.