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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by David Hynes
David Hynes
4,309 Points

Curiosity: Are there other ways to prevent the text wrapping from being a problem?

Besides using clear on the 4th item, is there a way to eliminate the issue of wrapping text pushing things out of place? When I paused to take notes, I wondered what Nick's solution was going to be and thought about it myself. I don't know how to do it, but my initial thought was to make it so that the text font shrinks at whatever break point the text would wrap and cause trouble. I'm curious what other methods we might use, or is clear the only one that makes sense?

Doug McClure
Doug McClure
3,290 Points
Doug McClure
Doug McClure
3,290 Points

Breakpoints are a common way to handle it by saying the font should be a certain size at a specific breakpoint. Another method with font is to use the unit 'vw' (or 'vh' for height) rather than 'em'. This unit represents a percentage of the screen. So each character of type will take up a certain width (or height) of the viewport. Here's a post about it by Chris Coyier. It's important to keep accessibility in mind with these solutions, though; the font could become too tiny if the viewport is small.

If Nick wanted to add more projects that extended in to a third row, he would have to clear the float on the 7th item as well, which isn't a huge issue, but it would be better if there was a more automatic solution when adding more content.

A more modern approach would be Flexbox. It doesn't have quite as much browser support, but it's on its way. Experienced developers are saying that it will eventually replace floats (I think it already has). However, this shouldn't be an excuse to dismiss floats in your learning; they are very important to understanding the flow of a page.