Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Enhancing Design with CSS Finishing Touches Applying Media Queries

I know inline-block is a short term solution, but why is my result not the same?

I am having an issue where my two columns are not aligned correctly when using the inline-block display.

Does anyone know what may be causing this? I have tried adding margin and padding to evenly distribute the two but it doesn't have any effect.

This is my result

5 Answers

Hi Thomas!

I just did some testing and the issue is as I suspected.

It's because the packing list has one more item than the "Tents to Resorts" list.

(The right column is one line taller.)

Looking for a solution now, though - and I'll follow-up when I have one.

I hope that helps.

Stay safe and happy coding!

Hi Thomas!

One easy/cheesy fix is to add a line break after the last list item in the first/left list.

Like this:

        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
          <br /><!-- Add this -->
        </ul>

I'll try a few other things (a CSS/style solution), but that does work.

I hope that helps.

Stay safe and happy coding!

So far, because CSS is such a MESS (sometimes) and frustratingly hard to figure out (virtually impossible sometimes).

Good meme about it:

https://media0.giphy.com/media/yYSSBtDgbbRzq/giphy.gif

The HTML solution is the only way I could fix it, so far.

Yo Thomas,

The only way, so far, that I could fix it with CSS (but I still had to modify the HTML), was to add a "left" class to the first/left "column" div, and then add this below .class in the media query:

  .left {
    position: relative;
    top: -30px;
  }

Which to me is a clunky fix, at best, I actually think just adding the HTML break is the best fix.

Unfortunately, I have found that often I do have to add some weird, seemingly unnecessary CSS fixes to get certain web pages to look right. Sometimes I think CSS needs a complete overhaul. Sometimes it's mystifying and infuriating at the same time. Like, have you experience "collapsing margins" - they exist and to me are ROCK STUPID!?!

More on collapsing margins:

https://css-tricks.com/what-you-should-know-about-collapsing-margins/

I hope that helps.

Stay safe and happy coding!

Thanks so much for taking the time to try and solve this!

I had a feeling from the start that it was something to do with there being more content in the one column than the other just wasn't sure how to go about fixing it.

Upon further testing I noticed that it would only jump out of alignment once my browser window was over a certain pixel width (around 1400px), up to that point it would align perfectly.

Thanks again for your time! I really appreciate it!

Pedro Oliveira
Pedro Oliveira
2,902 Points

Hi I have the same doubt. My question to Peter is, by adding a line break won't it be a problem If more items are added in the future? Isn't there a way to align the columns at the top so they will expand longer at the bottom if necessary?

Edit: The line break, in my case, conflicts with screens under 1000px, they go back to be out of alignment, and the opposite happens If i remove the line break, meaning that under 1000px it is fine, above it jumps out of line.