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 Image Captions

Kartik Kapoor
Kartik Kapoor
3,016 Points
Posted by Kartik Kapoor
Kartik Kapoor
3,016 Points

Why is footer affected by the float property(goes into a column) when we are applying float only to id "gallery"?

Why is footer affected by the float property(goes into a column) when we are applying float only to id "gallery"? Footer is not under the id "gallery".Is it because of the cascading nature?

2 Answers

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Kartik,

This article from CSS Tricks should help to explain.

Hope it helps.

-Rich

Antony Kalogeropoulos
Antony Kalogeropoulos
5,562 Points
Antony Kalogeropoulos
Antony Kalogeropoulos
5,562 Points

I'm no expert but here goes:

The float has been created so that block elements (like the paragraph "<p>") do not occupy the entire width of the screen (try creating a paragraph with the word "hello", ex: <p> hello </p>, and you will see that it takes an entire line).

The float is basically telling to the elements after the element in which it has been inserted: "Hey guys. I know I'm a block element and I usually occupy the entire width by my self but I have changed my mind and I don't mind if you come next to me and keep me company."

So, all the elements after the block element try to get as close to it as possible.

It hasn't so much to do with the cascading nature of css, as it has to do with the visual layout of the page. From now on, you are better off visualizing all elements after the float trying to get as close to it as possible.

Cheers, Antony