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 CSS Layout Techniques Display Modes Table Display

Posted by Scott Holland, Jr.
Scott Holland, Jr.
8,142 Points

.main-nav elements set to display: inline-block are going off screen when resizing browser

.main-header { padding: 20px; white-space: nowrap; display: table; width: 100%; min-height: 150px; }

.main-logo, .main-nav, .main-nav li { display: inline-block; }

.main-logo, .main-nav { display: table-cell; vertical-align: middle; }

The .main-nav list items are not staying within the page when I scale down the size of the browser. I was under the assumption that inline-block elements would begin to stack below each other in this situation. Instead, they just disappear off screen to the right. I have tried adding display: clear, in case it was an issue of a previous element effecting it. When they are set to block they stack correctly in a smaller browser window.

1 Answer

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

I think it has something to do with that table-cell property. Why is that needed? You can use v-align with inline-block elements by default. Try eliminating that last line of css and move the vertical-align property into the properties for ".main-logo, .main-nav, .main-nav li ".

Scott Holland, Jr.
Scott Holland, Jr.
8,142 Points

I tried those suggestions, removing display: table-cell and moving vertical-align: middle to the ".main-logo, .main-nav, .main-nav li" rule and that did not fix the problem.

I had the table-cell line in there because the instructor in the video recommended putting it in there. I believe the explanation was that displaying the header elements like a table will make them easier to keep in order, I'm not sure.

With the fix you recommended I'm still seeing the nav elements disappearing to the right of the screen, there was just a change to the header. Some added margin to either side that the nav links cross over as well.

Thank you just the same for your answer!

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

Just put a quick demo together... it's the white-space:no-wrap property. It's doing exactly what's it's supposed to, prevent elements from wrapping to another line.

Scott Holland, Jr.
Scott Holland, Jr.
8,142 Points

Boom! You got it. I removed it and that fixes the problem. I don't see any other differences though, why would Guil have lead me astray? At the time he (we) added that line, it was to fix an issue with space between nav link elements. But without it, I'm not seeing that spacing issue anyway.

Thanks again for the great answer.