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
Karl Hopkinson-Turrell
Courses Plus Student 350 PointsWhy is the floated image sitting under the header?
If float takes an element out of the normal flow and aligns it with the container, why is it that one sibling element (the h2 element) sits above the floated image, while other sibling elements (the p elements) wrap around the image?
Both h2 and p are block-level elements. Does the browser have a specific rule regarding headers and floats?
4 Answers
Flor Antara
12,372 PointsHi Karl,
It would be nice to see your code to be able to answer you more accurately, but from your description I suspect that you have the markup structured as follows:
<h2>
<img>
<p>
That would explain why your h2 is being placed above the image instead of being stacked towards it.
Take a look at this quick CodePen I put together with the 2 scenarios: https://codepen.io/florantara/pen/b21b53e55850e46084bc3ef23012878f/
On the other hand, I would recommend to take a look at Flexbox, the new layout model that was created to solve this problem and many more!
This example I have here uses Flexbox to align an image and text: https://codepen.io/florantara/pen/qXrzQQ
Karl Hopkinson-Turrell
Courses Plus Student 350 PointsThanks Flor, this was intended to be question related to a specific Treehouse video (https://teamtreehouse.com/library/css-layout-basics/page-layout-with-the-float-property/wrapping-text-around-images-with-floats), sorry for the lack of context!
That is the structure yes, what I don't understand is why the layout is different in your two examples. I understood floated elements to be taken out of the normal flow in their container, so all block-level elements would wrap around it regardless of order. Based on that, I thought your first example would be the layout regardless of element order.
I do like Flexbox a lot! I'm aiming for a really good understanding of CSS including perhaps 'older' techniques like floats.
Flor Antara
12,372 PointsThat sounds like a good plan, Karl!
Floats are confusing for sure, and I bet everyone who codes HTML and CSS has struggled with it at least once.
I recommend reading this article that lists and tries to explain "the theory" and what you need to know: https://www.smashingmagazine.com/2007/05/css-float-theory-things-you-should-know/
Regarding the "regardless of order" that you mention, it's not quite like that. If you float an element, the elements that will try to wrap it will be the following elements, not the previous one on the markup. That's why placing your h2 before the image doesn't wrap it.
Karl Hopkinson-Turrell
Courses Plus Student 350 PointsAh okay! Great, that's a rule I can understand, so it's not a particular exception for the h1-h5 elements, and it's just because the h2 was before the floated element, and only elements after it will be wrapped. It's like the normal document flow is observed up until the floated element? I'll have a read of the article you mentioned, thank you very much for your help.
Flor Antara
12,372 PointsCorrect!
Good luck! Keep it up!