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

Jimmy Mannan
Jimmy Mannan
5,201 Points
Posted by Jimmy Mannan
Jimmy Mannan
5,201 Points

Footer is overlapping another section.

Hi,

https://w.trhou.se/i4qohncap9

I tried to give a background color to footer but the background color was applied to the gallery also. Here in the code I have put a border around the footer to see its reach. I am not able to figure out why the footer's border is covering the images gallery.

I am making the mobile version so please minimise the browser and then see the site. (If I see the site in full window, the twitter icon goes outside the border!)

I guess with the snapshot I dont have to paste th e code below.

regards jimmy

1 Answer

tootiemcflow
tootiemcflow
5,601 Points

Hey Jimmy, you need to clear your footer of all floated elements. When you use float on an element it's removed from the flow of the document. In other words your gallery isn't contributing to the height of the page. Which is causing your footer to take over.

footer {
  margin: 0;
  padding: 0;
  bottom:0;
  background-color: #fac;
  clear: both;
}

You can learn more about floats here.

Jimmy Mannan
Jimmy Mannan
5,201 Points
Jimmy Mannan
Jimmy Mannan
5,201 Points

Thanks Robby. I have used 'clear' before but I wasnt clear of its purpose but your answer has made it clear now.

Have a good day!