Brody James Brody James - 1 day ago 4
CSS Question

How do I center align a two column list under a paragraph of text on a responsive website?

Please see the two screenshots. One screenshot shows the left column not centered. The second screenshot has both columns centered under the paragraph. I would like to achieve this result on a responsive website.


  • Current Result
    [https://s11.postimg.org/bcu53jhhv/current_result.jpg][1]

  • Intended Result
    [https://s11.postimg.org/9mb421zyr/intendend_result.jpg][2]

    <p align="center">
    One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.
    </p>

    <div style="float: left; width: 50%;">
    <ul>
    <li><i class="fa fa-check"></i>   Item 1</li>
    <li><i class="fa fa-check"></i>   Item 2</li>
    <li><i class="fa fa-check"></i>   Item 3</li>
    </ul>
    </div>

    <div style="float: right; width: 50%;">
    <ul>
    <li><i class="fa fa-check"></i>   Item 4</li>
    <li><i class="fa fa-check"></i>   Item 5</li>
    <li><i class="fa fa-check"></i>   Item 6</li>
    </ul>
    </div>


Answer

Make only one <div> as container and use display: flex.
Here's how I'd do it :

<div id="container">
    <ul>
        <li><i class="fa fa-check"></i>   Item 1</li>
        <li><i class="fa fa-check"></i>   Item 2</li>
        <li><i class="fa fa-check"></i>   Item 3</li>
    </ul>
    <ul>
        <li><i class="fa fa-check"></i>   Item 4</li>
        <li><i class="fa fa-check"></i>   Item 5</li>
        <li><i class="fa fa-check"></i>   Item 6</li>
    </ul>
</div>

And in CSS :

#container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
/* it will calculate automatically, try space-between too */
}

#container ul {
    max-width: 50%;
}

It should be okay like that. Take a look at the multiple CSS Flexbox properties, it will keep your code correct and easier !

Comments