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

HTML

Posted by Justin Cantley
Justin Cantley
18,068 Points

Trouble with my body element.

I created a simple interactive photo gallery. The trouble is that when I inspect the elements of the DOM through chrome devtools it shows that my image gallery is outside of my body element, when it is clearly within the body tag in my html. Can anyone tell what is going on here?

This is the link to my project: https://github.com/JustCant/InteractivePhotoGallery

Zack Lee
Zack Lee
Courses Plus Student 17,662 Points

strange, I'm looking at it in chrome and its working fine.

Matthew Long
Matthew Long
28,407 Points

I don't see anything outside the body either

Justin Cantley
Justin Cantley
18,068 Points

When I look at the DOM tree in my devtools window I see the list within the body element, but when I use the select element tool and hover over the body element it displays above the list items. You guys don't see that same issue in your browsers?

Justin Cantley
Justin Cantley
18,068 Points

Actually I think I figured out the issue. I believe the fact that my <li> tags were floating is what makes them appear to be outside of the body element. Thanks guys!

1 Answer

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

The DOM inpector shows that the elements are inside the body. I think what you mean is that they appear to be positioned outside visually.

This is typical for floated items unless they are inside a container and followed by another element with the clear property. Floated items are not considered part of the normal document flow.