Positioning issue in ExpressionEngine cms

Question

I have a positioning issue with my in expression engine. click Here On the following link I am looping elements with <div id="services-container"> I have noticed it loops fine on the first row however begins to misalign on the second row. I have made attempts to use the switch="" tag to create an individual class for each loop, see below:

{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
    <div id="services-container" class="{switch='1|2|3|4|5|6'}">
        <div class="service-content">
            <img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
            <p>{service_head_line}</p>
            {service_listed_items}
            <ul class="service-credentials">
                <li>{service_list_1}</li>
                <li>{service_list_2}</li>
                <li>{service_list_3}</li>
            </ul>

            <ul class="service-credentials">
                <li>{service_list_4}</li>
                <li>{service_list_5}</li>
                <li>{service_list_6}</li>
            </ul>
            <a href="#">View related projects &raquo;</a>
            {/service_listed_items}
        </div><!--service-content-->
    </div><!--SERVICES CONTAINER-->
    {/exp:channel:entries}

When i try to class these classes out in my style sheet nothing is happening. Does anyone know what i am doing wrong?

Answer 1

This involves ExpressionEngine but also css. Basically you are trying to create a grid with 3 items in each row, correct ?

Each of these "row" has to adopt a float containment strategy, since it only contains 3 floated items. The way I would go about it using the switch parameter:

{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
        {if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
                <div class="item">
                        ...code...          
                </div>
        {if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}

That code would include a div with a class of row every three items in that loop.

Then, if your items are floated, your rows must have some sort of float clearing strategy to contain them like overflow:hidden; or a clearfix method.