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
Adam Ridgley
12,255 PointsStuck with floating elements
Hello,
I'm trying to make two elements float side by side, but when I float the elements, the wrapper div which they are contained in no longer appears correctly, its like it doesn't recognize the elements are being floated and doesn't auto adjust its height anymore like it normally would. Here is my code, can someone tell me what i'm missing?
wrapper {
max-width:960px; margin:0px auto; background-color:orange; //To try and see the wrapper padding:5px; }
blognav {
float:left; width:30%; }
blogposts {
width:60%; float:right; }
The elements float correctly, but its like the height of the wrapper div isn't there anymore, what css property am I missing?
Thanks,
Adam
2 Answers
Anna Dadej
10,707 PointsHi,
you can 1) add overflow: hidden; to your wrapper or 2) use clearfix hack: add .group::after { content: " "; display: table; clear: both; } to your css and then add class group to yyour wrapper .
Adam Ridgley
12,255 PointsHello,
overflow: hidden; seems to have fixed it.
Thanks for your help!
Adam
Anna Dadej
10,707 PointsOk :) however many sources say that the second method is better. The first one can make some issuse.