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 Styling Web Pages and Navigation Style the Portfolio

Posted by Adam Parrott
Adam Parrott
3,055 Points

Can't get "float" to work correctly ...

So I'm at the point in the project where we make the images on the portfolio page float. Everything on my page looks fine - until I add the float attribute to the #gallery. When I do that, the <div> seems to disappear, the footer connects up to the header, and the images seem to just float over everything in 2 columns . When they aren't floating the <div> portion with the <ul> of images has the correct background color and the footer stays at the bottom of the page. I'm just confused as to where I should be looking to fix this issue since before adding the "float" all the html structure seems to be working fine ….

Any ideas would be helpful :) Thanks

4 Answers

Thiago de Bastos
Thiago de Bastos
14,556 Points
Thiago de Bastos
Thiago de Bastos
14,556 Points

Hey Adam, posting the relevant code you are having trouble with will make it much easier for someone to help you.

Also, you can get the project's completed code by downloading the project files from the right nav bar on the lesson screen. In there you will find the completed project files where you can compare your code with the completed version. This can be really helpful in finding quick answers to these kind of bugs. I hope that helps, if not, post your code and I will see what I can do.

Adam Parrott
Adam Parrott
3,055 Points
Adam Parrott
Adam Parrott
3,055 Points

Thanks Thiago :)

My issue is that the project encouraged me to expand and play with the code we are learning … so by now it's pretty different from the project code. I was just hoping that I was missing a common issue with the float function as I'm not entirely sure what code I should be looking at to find the problem.

Urgh.

How do I post the code to the forum?

Thiago de Bastos
Thiago de Bastos
14,556 Points
Thiago de Bastos
Thiago de Bastos
14,556 Points

Hey Adam Parrott did you sort out your issue? Sorry I have been really busy with work this week and didn't get a chance to have a look for you!

Unsubscribed User
Unsubscribed User
2,369 Points
Unsubscribed User
Unsubscribed User
2,369 Points

It sounds a lot like your #gallery div is collapsing or if using firefox, floating left (literally). I have observed some odd float behavior in Firefox compared to Chrome.

As Thaigo mentioned, posting the code would help.

It would be nice to know what div's around around your #gallery and what CSS is being assigned to to the #gallery and surrounding div.

I'm going to assume something like this html <div class="aboveGallery"></div> <div class="yourGallery"></div> <div class="footer"></div>

Adam Parrott
Adam Parrott
3,055 Points
Adam Parrott
Adam Parrott
3,055 Points

Hey guys, thanks for the responses :) I was actually out of town for a few weeks and am just now starting to tackle the problem again. I'll try your suggestions and get back to you if I still can't figure it out.