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! While you're at it, check out some resources Treehouse students have shared here.

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

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

How can I stop this list align problem?

I am having a problem with a list I have, the issue is that the number of characters from the list on the left is effecting where the list on the right starts.

Here is an example:

http://screencast.com/t/pFKCOrkOJ

What would be the best method to stop this?

I wouldn't be bothered but that is a listing module and will have many different values in it so they need to display for longer words also.

Here is my HTML

<div class="ul-listing-container">
            <ul>
              <li class="diesel-svg list-svg">Diesel</li>
              <li class="saloon-svg list-svg">Saloon</li>
              <li class="gear-svg list-svg">Manual</li>
              <li class="color-svg list-svg">Orange</li>
            </ul>
          </div>

Here is my CSS:

.list-svg {
    list-style-type: none;
    background-repeat: no-repeat;
    padding-left:50px;
    float:left;
    color:#eee;
    font: 400 1.2em 'Open Sans', sans-serif;

}

.diesel-svg {
    background:url(/../media/img/nozzle.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    margin: 5px 10px 5px 0;
    background-position: 0px 7px;
}

.saloon-svg {
    background:url(/../media/img/saloon.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    margin: 5px 10px 5px 1em;
    background-position: 0px 7px;
}

.gear-svg {
    background:url(/../media/img/gears.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    margin: 5px 10px 5px 0;
    background-position: 0px 7px;
}

.color-svg {
    background:url(/../media/img/color.svg);
    background-size: 45px;
    background-repeat: no-repeat;
    margin: 5px 10px 5px 1em;
    background-position: 0px 7px;
}


.ul-listing-container {
    width:39%;
    float:left;
    margin:auto;
}

Ideally I'd like to stop them pushing right when more characters are added and maybes make each li push left and right when new characters are added.

Any ideas?

2 Answers

Gabriel Roczanski
PLUS
Gabriel Roczanski
Courses Plus Student 2,136 Points
Gabriel Roczanski
Gabriel Roczanski
Courses Plus Student 2,136 Points

The list itens are with relative width, try set them an porcentage width or static (:

Like .list-svg { width: 50%; }

edit: if you use 50%, don't forgot the box-model (padding-left).

Brenton Kelly
Brenton Kelly
1,058 Points

I agree. I've used this same method to fix this problem. Put box-sizing: border-box on .list-svg so that the padding doesn't affect the 50% width. Use -moz and -webkit prefixes too just to play it safe.

Sam May
Sam May
8,363 Points
Sam May
Sam May
8,363 Points

Honestly, It just looks like Automatic is too long a word to include in a left and right column of that size.

I'd either try and settle for 'Auto' as the word, or even better, have them one above the other rather than in a grid of four.