Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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,868 Points
Rich Bagley
Rich Bagley
25,868 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