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

Why if we tell the browser to only float elements from the gallery , does it takes the footer pics as well?

Why if we tell the browser to only float elements from the gallery div, does it takes the footer pics as well? SHouldnt they be separated? because the footer elements are not inside the gallery div and they're in another section called footer. I actually cheked and if i add background color to the footer, b4 "clear: both" it will mark a very wide area up to the header.

2 Answers

SERGIO RODRIGUEZ
SERGIO RODRIGUEZ
17,532 Points

Adolf I posted the same question a few days ago and finally I figured out the answer.

When you float an element you are allowing surrounding content to wrap (or flow) around it in the available space (if there is any), regardless if the surroundings are floated or not. In other words, float is more about the surroundings than the element itself.

The way elements are laid out by the browser when elements are floated depends on the size of the elements (both the floated and the surroundings) and the available space, that's why you use margins/padding to manipulate the size of elements to make them render the way you want.

In this case particular case, there is enough space for the footer to wrap around the 3rd image, so it wraps. One way to tell the browser to not allow to flow freely is by clearing the elements you don't want to be influenced by the float (e.g the footer)

Adolfo,

Frustration seems to come with the territory! Without seeing your code as written it is difficult to answer your question. Checkout the markdown cheatsheet for the tips on posting code, and someone will answer! All the best,

Jon