<li> sorting irregularly

Hi Cheryl,

The general problem here is that we're floating items of variable height. Usually this is due to the captions being different lengths and wrapping to a different number of lines. This makes some items taller than others. In your case, it may also be due to the images themselves not having the exact same heights. Might be off by a pixel or 2. Your low and high range do not have the exact same aspect ratio. They're off slightly.

The images aren't really a problem because it needs to be fixed anyways for the caption.

If you're seeing the 3rd item stuck underneath the 2nd item then it's because the 1st item is taller than the second. So the 3rd item is trying to go all the way to the left but gets blocked by that 1st item which extends down lower. The solution is to clear the floats for the 1st item in every row. This way it drops down below all the previous floats and is able to move all the way to the left.

In a two column layout the first item in every row would be 1st, 3rd, 5th, 7th,... or every odd item.

Add the following after your rule that sets the li width to 45%:

#gallery li:nth-child(odd) {
  clear: left;
}

Later in the responsive stage this will be turned into a 3 column layout and so a different :nth-child expression is needed for that. I'm only telling you this now so you can save it and you'll know what to do when you get there.

This will go into responsive.css:

#gallery li:nth-child(odd) {
    clear: none;
  }

  #gallery li:nth-child(3n + 1) {
    clear: left;
  }

Here we have to first remove the clear property on the odd items which we set earlier in "main.css" because that was only good for 2 columns and it will mess up the 3 column layout. Then we can go ahead and clear the correct items for a 3 column layout. In a 3 column layout, the 1st item in every row would be 1st, 4th, 7th,... :nth-child(3n + 1) is the expression that would select those items. It will select the 1st item and then every 3rd item after that.

I recommend you save this or bookmark this discussion so you can put this in when you get to the 3 column video.

Let me know if you have any questions about this.