Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Ivan Tomicic
Ivan Tomicic
3,873 Points

Lists are showing from bottom to top?

Hello, I have small problem here...

Those lists are showing from bottom to top of parents div, here is photo:

alt text

And here is code:

        <div class="unknowncenter">
            <section class="uknowncenterchild lists">
                <ul>
                    <li>
                        <h3>Identity</h3>
                        <ul class="sublist">
                            <li>Logo & Identity Design</li>
                            <li>Brand Development</li>
                            <li>Naming</li>
                            <li>Creative Direction</li>
                            <li>Illustration</li>
                            <li>Brand Guidelines</li>
                            <li>Strategy</li>
                            <li>Brand Management</li>
                        </ul>
                    </li>
                    <li>
                        <h3>Online</h3>
                        <ul class="sublist">
                            <li>Websites</li>
                            <li>Responsive & Mobile</li>
                            <li>Blogs</li>
                            <li>E-mail Marketing</li>
                            <li>Social Media Page Design</li>
                            <li>Website Illustration</li>
                            <li>Facebook Page Design</li>
                        </ul>
                    </li>
                    <li>
                        <h3>Print</h3>
                        <ul class="sublist">
                            <li>Packaging</li>
                            <li>Collateral</li>
                            <li>Stationery</li>
                            <li>Editorial</li>
                            <li>Book Covers</li>
                            <li>Menu</li>
                        </ul>
                    </li>
                </ul>
            </section>
        </div>

.unknowncenter {
    margin-top: 50px;
    display: table;
    width: 100%;
}

.uknowncenterchild  {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

.lists ul {
    display: inline;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lists ul li {
    top: 0;
    display: inline-block;
    width: 320px;
    margin: 0 25px;
    text-align: center;
}

.lists h3 {
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
    color: #63beb5;
}

.lists .sublist li {
    margin: 0;
    padding: 0;
}

7 Answers

Mireille Pasos
Mireille Pasos
35,469 Points

At a first glance it looked to me like the total width of each element within lists ul li was pushing the next element a bit. But I might be misunderstanding the problem. I read your post again and now I'm not sure if I gave you an answer according to your actual question. Your post does say the problem is the order, but at some point I went with what I saw in the picture: one list appearing lower than the other. If that's what you want to solve it might just be a question of vertical-alignment then.

Ivan Tomicic
Ivan Tomicic
3,873 Points

Sorry if I wasn't clear :(

Yes, I'm having problem with vertical alignment and I have no idea how to fix that. I want all titles at same line and then list items below them.

lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

Ivan,

This is how i'd solve your issue. Hope this helps :-)

http://codepen.io/anon/pen/KzFjv

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Hi,

I think adding a "box-sizing: border-box;" to the "lists ul li" might help.

Ivan Tomicic
Ivan Tomicic
3,873 Points

This didn't help :/

.lists ul li {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    top: 0;
    display: inline-block;
    width: 320px;
    margin: 0 25px;
    text-align: center;
}
lovell
lovell
7,882 Points
lovell
lovell
7,882 Points

photo looks like correct order?

Ivan Tomicic
Ivan Tomicic
3,873 Points

I don't understand?

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

Not a problem. Then this should do it: within your "lists ul li" add "vertical-align:top;"

Mireille Pasos
Mireille Pasos
35,469 Points
Mireille Pasos
Mireille Pasos
35,469 Points

This might be a good future reference: http://www.impressivewebs.com/css-vertical-align/

Ivan Tomicic
Ivan Tomicic
3,873 Points
Ivan Tomicic
Ivan Tomicic
3,873 Points

Thank you, that was so simple, yet so useful!

Mireille Pasos
Mireille Pasos
35,469 Points

Cool! I'm glad it worked :)