1

Trying to make some quick fixes for a client, despite being more or less a total EE n00b (I typically do more home-rolled CMS stuff).

I'm trying to do a very simple grid layout, x rows by 3 columns, inside a channel entries block. This mostly works:

{exp:channel:entries [...]}
    <div style="{switch='float:left;|float:right;|overflow:auto;'} width:33%;">
        [...]
    </div>
{/exp:channel:entries}

except where count mod 3 is 2, in which case my last row of divs has one float left & the other float right, so a big ugly gap in the middle.

I understand I'd need a plugin to have the modulo operator that I would usually use to write logic a little smarter than this switch. I also understand there are some plugins designed to generate layouts like this for me. However, I'm in a situation where I have no choice but to work on a production site, and like I said, I'm an EE n00b, so I absolutely want to avoid plugins.

Anyone have a solution? Other than going all web 1.0 on it and using table cells instead of divs? :D

Thanks in advance.

1
  • 1
    The EECMS 2.7.1 has modulus on conditionals. Do all rows need to have the same number of items? Otherwise, this can be done just on CSS.
    – Sobral
    Sep 26 '13 at 3:34
2

Not sure there is any logic in EE templates required at all. Simply set the container’s width, the inner element’s width to one third of that, and float them all left… no? In the below example, we end up with a final row of just two, both sitting pretty to the left.

<style>
    .cont {
        width: 600px
    }
    .cont div {
        width: 200px;
        float: left;
    }
</style>
<div class="cont">
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
    <div>One</div>
</div>
2
  • I've done something very like this on one of my sites, but I don't have the width fixed so it can be more than three columns: sparklecrackcentral.com/such/obsessive/fixations/show/… 50 divs per page, all wrapped in a single outer container-div. Change the styling as necessary for the gallery class, et voila - you can have your three columns.
    – user800
    Sep 26 '13 at 0:38
  • This looks like it would work so I'll accept it but I should disclaimer here that the project requirements changed to display a fixed number of entries... 2 rows of 3... rendering my question moot. (This is also why I disappeared while we sorted out what I was actually being asked to build. Very sorry about that.) Thanks! Oct 11 '13 at 4:00
0

I've answered a question like this before. Have a look at this question/answer and it should outline how you can approach it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.