CSS columns: How can I properly align my two columns?

Question

I'm trying to make two columns for my home page, but I can't properly align my two columns side by side: http://prntscr.com/7fun6n

I applied a border-bottom to my li tags, but as you can see on the image above, this is not aligned properly.

My HTML code:

            <div id="index-features">
                <ul>
                    <li>
                        <h5 id="feature-1" class="feature-title">Instant access</h5>
                        <span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
                    </li>
                    <li>
                        <h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
                        <span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
                    </li>
                    <li>
                        <h5 id="feature-3" class="feature-title">Modern techniques</h5>
                        <span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
                    </li>
                    <li>
                        <h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
                        <span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
                    </li>
                    <li>
                        <h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
                        <span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
                    </li>
                </ul>
                <ul>
                    <li>
                        <h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
                        <span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
                    </li>
                    <li>
                        <h5 id="feature-7" class="feature-title">High quality support</h5>
                        <span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
                    </li>
                    <li>
                        <h5 id="feature-8" class="feature-title">Custom framework</h5>
                        <span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
                    </li>
                    <li>
                        <h5 id="feature-9" class="feature-title">Extra features</h5>
                        <span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
                    </li>
                    <li>
                        <h5 id="feature-10" class="feature-title">uuuuu</h5>
                        <span id="feature-10-description" class="feature-description">ffffcan remove the copyright ("Style by XenDesignFocus") of the style.</span>
                    </li>
                </ul>
            </div>

My CSS:

#index-features
{
    position: relative;
    margin-top: 15px;
    text-align: center;
}

#index-features ul
{
    float: left;
    width: 45%;
}

#index-features li
{
    border-bottom: #CCCCCC 1px solid;
    margin: 0 -20px 20px -20px;
    padding: 0 20px; 0 20px;
}

.feature-title
{
    display: inline-block;
    font-weight: bold;
}

.feature-title:before
{
    content: "";
    float: left;
    background: url("../images/index-features-sprite.png") no-repeat;
    width: 32px;
    height: 32px;
    margin-right: 5px;
}

.feature-description
{
    display: block;
    margin: 0 0 20px 37px;
}

#feature-1:before
{
    background-position: 0 0;
}

#feature-2:before
{
    background-position: -32px 0;
}

#feature-3:before
{
    background-position: -64px 0;
}

#feature-4:before
{
    background-position: 0 -32px;
}

#feature-5:before
{
    background-position: -32px -32px;
}

#feature-6:before
{
    background-position: 0 -64px;
}

#feature-7:before
{
    background-position: -32px -64px;
}

#feature-8:before
{
    background-position: -64px -32px;
}

#feature-9:before
{
    background-position: -64px -64px;
}

I would like to know what must be added so that everything is neatly side-by-side.

Answer 1

Add this to #index-features ul

columns: 2;
-webkit-columns: 2;
-moz-columns: 2;

columns set's the number of columns a ul element will have, in your case 2.

---

And this to #index-features li

display:inline;
line-height:1.5em;

Display set to inline (lined) and also the line height so they have the same size.

---

Also you can merge the HTML. (don't need to create 2 ul elements)

<li>
    <h5 id="feature-1" class="feature-title">Instant access</h5>
    <span id="feature-1-description" class="feature-description">After purchasing a style, there will be no waiting. Your account will be directly promoted in the "Customers" group and you will unlock access to all the features of the forum.</span>
</li>
<li>
    <h5 id="feature-2" class="feature-title">Compatibility with all browsers</h5>
    <span id="feature-2-description" class="feature-description">The styles are tested on all browsers to analyze any bugs and if we find, we correct them.</span>
</li>
<li>
    <h5 id="feature-3" class="feature-title">Modern techniques</h5>
    <span id="feature-3-description" class="feature-description">We use modern techniques (CSS3 gradients, etc.) to stand out from others.</span>
</li>
<li>
    <h5 id="feature-4" class="feature-title">Compatibility with the default XenForo products</h5>
    <span id="feature-4-description" class="feature-description">The styles are worked not only for the forum software, but also for the default XenForo products (Media Gallery and Resource Manager).</span>
</li>
<li>
    <h5 id="feature-5" class="feature-title">Optional copyright removal</h5>
    <span id="feature-5-description" class="feature-description">By paying more for a style, you can remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>
<li>
    <h5 id="feature-6" class="feature-title">Compatibility with any resolution</h5>
    <span id="feature-6-description" class="feature-description">The styles are designed to be compatible on any resolution. They are responsive, so they will fit on tablet and mobile.</span>
</li>
<li>
    <h5 id="feature-7" class="feature-title">High quality support</h5>
    <span id="feature-7-description" class="feature-description">If you need help about a purchased style here, ask in the <a href="#" target="_blank" style="border-bottom: 2px solid;">support forum</a> so that we can fix your problem very quickly.</span>
</li>
<li>
    <h5 id="feature-8" class="feature-title">Custom framework</h5>
    <span id="feature-8-description" class="feature-description">All styles are based on a custom framework for features such as the ability to change the logo image with a HTML logo text, make the appearance of the avatars in rounded, put a custom node icon for each forum, etc.</span>
</li>
<li>
    <h5 id="feature-9" class="feature-title">Extra features</h5>
    <span id="feature-9-description" class="feature-description">In addition to the custom framework, some styles have custom features such as for example the possibility to enable the fixed header option, etc.</span>
</li>
<li>
    <h5 id="feature-10" class="feature-title">uuuuu</h5>
    <span id="feature-10-description" class="feature-description">ffffcan remove the copyright ("Style by XenDesignFocus") of the style.</span>
</li>

Answer 2

You can get them even if you specify a fixed height for each list item. The downside is that some list items will contain a little bit of text and a large amount of white-space underneath.

http://jsfiddle.net/cjh4re1c

 #index-features li -> height: 160px;

Answer 3

There is an CSS3 Column property that you can try, if you want to simplify your code and you don't need to write code for old browsers.

Try out something like...

div {
  -webkit-columns: 100px 3; /* Chrome, Safari, Opera */
  -moz-columns: 100px 3; /* Firefox */
  columns: 100px 3;
}