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

Posted by Lili Köves
Lili Köves
3,471 Points

Floating left problem: The div above is pushing the one below to the right, what should I do and what's causing this?

Took a snapshot of the project: https://w.trhou.se/36mu137xni

The set up is the following: I have 3 divs within another, these all set to have 30% width and to float to the left. I also set it so that below 900px broswer width the divs with increases to 45%, so they don't get to narrow. That works mostly well, but as I have text in these divs, at times the text in the first div breaks to more lines and so the div gets taller. This causes the first div (blue) to be longer then the next one and push the third -that is already below them- to go to the right. Why is this happening?

1 Answer

David Bath
David Bath
25,940 Points

Yes, floats can be tricky! What's happening is that the third column won't fit to the right of the second column, so it wraps below, as you expected. However since the first column is taller, the third column gets "stuck" to the right of it. You can fix this by adding clear: left like this:

.col:nth-child(odd) {
clear: left;
margin-left: 0px;
}

I haven't tested this, but it should then float below the first column as you want it to.

Lili Köves
Lili Köves
3,471 Points

Thank you! It worked perfectly.