Gaps Vertically Using Dividers

Question

I'm having a problem in CSS. Basically, there are many dividers with the same class (30% in width) that should go along the page.

Here's the page

I want three dividers across stacking up on each other. The first part works, but they aren't stacking up on each other. There are gaps (varying in size) between these dividers (vertically).

Question: How do I get rid of these gaps?

Code of the main index.php (PHP involved):

<div class="mainpage">
<?php
    foreach ($rules as $key=>$value)
    {
        if ($blockmethod == 1)
        {
            echo '<div class="rules_section-method1">';
                echo '<div class="rules_title"><h1>' . $value['title'] . '</h1></div>';

                echo '<div class="rules_list">';
                    echo '<ul>';
                        foreach ($value['rules'] as $rule)
                        {
                            echo '<li class="rules_item">' . $rule . '</li>';
                        }
                    echo '</ul>';
                echo '</div>';
            echo '</div>';
        }
        else
        {
            if ($current == 1)
            {
                $display = 'left';
            }
            else if ($current == 2)
            {
                $display = 'right';
            }
            else if ($current == 3)
            {
                $display = 'center';
            }
            else
            {
                $display = 'left';
            }

            echo '<div class="rules_section-method2" id="' . $display . '">';
                echo '<div class="rules_title"><h1>' . $value['title'] . '</h1></div>';

                echo '<div class="rules_list">';
                    echo '<ul>';
                        foreach ($value['rules'] as $rule)
                        {
                            echo '<li class="rules_item">' . $rule . '</li>';
                        }
                    echo '</ul>';
                echo '</div>';
            echo '</div>';
            $current++;

            if ($current > 3)
            {
                $current = 1;
            }
        }
        $cycles++;
    }
?>

CSS Code:

/* OTHER */

.background 
{
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px;
    z-index: -1;
    background-image: url('images/bg.jpg');
}

.bgcolor
{
    background-color: rgba(0,0,0,0.85);
    height: 100%;
    width: 100%;
    z-index: -1;
    position: fixed;
}

.mainpage
{
    color: #FFFFFF;
}

.rules_title
{
    background-color: #466D92;
    text-align: center;
    border-radius: 2px 2px 0px 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rules_list
{
    background-color: #252729;
    word-wrap: break-all;
    padding: 0px;
    margin: 0px;
    border-radius: 0px 0px 2px 2px;
    min-height: 100px;
    padding: 5px 5px 5px 5px;
}

/* METHODS */
.rules_section-method1
{
    width: 30%;
    height: auto;
    padding: 5px 5px 5px 5px;
    position: relative;
    margin-left: 25px;
    float: left;
    vertical-align: top;
}

.rules_section-method2
{
    width: 33%;
    height: auto;
    padding: 5px 5px 5px 5px;
    margin-left: 25px;
    display: inline-block;
    vertical-align: top;
}

#left
{
    float: left
}

#right 
{
    float: right;
}

#center
{
    text-align: center;
}

You may have already noticed but I've attempted two methods here. I would prefer if method #1 worked. However, I did try another method which involved setting the first divider to the ID "left", the next divider to "right", and so on. Sadly, that also didn't work.

Any advice/help is highly appreciated!

Thanks.

Answer 1

I'd recommend using the CSS3 column-width and column-gap properties. Check out this example:

http://www.bootply.com/118335 is a good example (bootstrap isn't necessary). The keys important parts are:

1. display: inline-block; width: 100%; on each "rules-section"
2. column-gap and column-width set on the containing div for the rules-sections