There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.
If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.
Join the Discussion. Help a fellow learner on their journey.
Ask or answer a question about this exercise by clicking reply () below!
Agree with a comment or answer? Like () to up-vote the contribution!
In this example, why did the .question divs “bump” into the .answer divs in the first place? If div is a block-level element by default, and we didn’t specify any display properties for div or .question (we only specified display: inline-block for .answer divs, of which .question is the parent element), then wouldn’t each new .question div start on a new line by default?
html would be .question container element, so wouldn’t .question always span the entire width of html?
I think it’s because the <div>s with class="question" are parent elements not just to the <h4> and <h2> elements which form the questions (question header and question text, respectively), but also to the <div>s with class="answer".
The declaration float: left;, as well as sending an element to the left of the space its parent occupies, also makes the other elements within that same parent (effectively its “brothers and sisters”) wrap/float around it. I think this is the “bumping into” action that the lesson describes, which we can then counteract by using the clear property.
I found the visual examples given in the demo at the top of https://developer.mozilla.org/en-US/docs/Web/CSS/float particularly helpful in grasping how the neighbouring elements interact when the float property is used to style one/some of them i.e. there is a knock-on effect and all of them are affected.
In my humble opinion, I don’t think exercises 10 and 11 (Float and Clear) of this lesson are particularly helpful in how they explain what is actually happening when we use the float property, and I think the examples could be much clearer. I was particularly confused until I read @mtf’s post and the MDN web doc (both of which I’ve linked to above).
I hope that helps! …and that some of the experts/moderators will chip in with any further clarification, correction, or confirmation of this.
Agreed – why was float introduced to us in a lesson where it does nothing but make a shambles of the demo page?
Wouldn’t it make more sense to teach us float in the context of a demo page where it was actually necessary? E.G. An author’s picture floated to the left of the text of an article they wrote.
Thank you jon_morris! Your post (particularly the link to the MDN article with the interactive example) was THE thing I needed to understand this. I agree the exercises on this site were not exactly the clearest at explaining the float concept.
The key takeaway I got from this is that a div is block level by default, but using a float makes it in-line, so other elements (if they fit) can ‘wrap around’ them.
For anyone who is having trouble, I highly recommend the interactive example on the MDN page!
I checked https://developer.mozilla.org/en-US/docs/Web/CSS/float, and I don’t think that using the float property makes a default block-level element inline. As you can see from the text and table just below the demo at the top, float uses a block layout, and actually computes inline and inline-block elements as block-level elements. I think the key here is setting the width of our block-level elements to less than the full width of the page, and then “floating” them. Any other elements within the same parent will then wrap around them (“if they fit”, as you say).
Yes, I think your explanation is more accurate than mine. They are block, but behave like chunks of inline in the sense that more than one block can fit in one line (if they fit…lol).
I find it funny how in the end after learning float and clear, they’re like “oh and on second thought, remove these.” Very clever, Codecademy, very clever.
I don’t know…I think the only point of this lesson was to intentionally mess up a web-page then walk the student through un-messing it up via CSS so that the student could learn interactively how the CSS applies visually to actual ‘content’ displayed in the viewport/webpage. In the end, the unnecassary top most element was still a mess. I re-wrote the CSS to make it not cover up the stuff below it when the user/visitor opened it their browser just to tidy it up before I moved on my with my educational experience here at Codecademy. I did learn how those annoying advertisements and click-bait videos that appear on various web-sites get put in my face to close so I can get to the content/information I was looking for in the first place got there. That was educational.
“In the example above, all <div> s on the page are floated to the left side. The element with class special did not move all the way to the left because a taller <div> blocked its positioning. By setting its clear property to left , the special<div> will be moved all the way to the left side of the page.”
That’s from the description of exercise 11. What does it mean that an element is taller? The wording is just so confusing - so the element moves, but then it doesn’t, but really it does?
The float property only works on elements with a display property of static or relative. I’m guessing it’s because an element with a display of absolute or fixed is taken out of the normal flow and is ignored by other elements. This is why inline/text elements don’t actually wrap around it
So basically, the float property is used to allow text to wrap around elements. The floated elements can either be on the far right or the far left of its parent container. The clear property is used to make sure an element will not wrap or go under a floated element.
Something most people don’t know about floated elements is that its siblings don’t actually wrap around them. Think of floated elements as clouds - they fly up high. Other elements can then go under the clouds. That’s what happens! Text, on the other hand, doesn’t go under floated elements. Instead, it wraps around floated elements. Something to keep in mind is that even the <p> element goes under floated elements but its textual content wraps around them
From the image above, we can see that the <p> element is, in fact, going under the floated <div> but the actual content of the <p> element is wrapping around the <div>
Note: The floated <div> in the image above is blue with an opacity of 0.2
Am I the only one who though the “float: left” in the .answer ruleset looked better than not having it at all? I see comments about how their web page was “jumbled”, but the only thing jumbled was the footer, which is set above the bottom of the page no matter what position value I set.
In the example above, all divs on the page are floated to the left side. The element with class special did not move all the way to the left because a taller div blocked its positioning. By setting its clear property to left, the special div will be moved all the way to the left side of the page.
Is the text supposed to say “wider” instead of taller for this lesson?
The term “taller” in this context refers to the height of an HTML element. When an element is described as taller, it means it has a greater height in comparison to other elements on the page.
In the example you provided, there are multiple <div> elements on the page, some of which are floated to the left side using CSS. When an element with the class “special” is floated to the left, but another <div> element above it (presumably without the “special” class) is taller in height, it might block the positioning of the “special” element, preventing it from moving all the way to the left as intended.
The clear property in CSS is used to control the behavior of an element concerning floating elements. When you set the clear property of the “special” <div> to “left”, it means that it will move below any preceding floated elements that are positioned to the left. So, in this case, by setting the clear property to “left”, it ensures that the “special” <div> will be moved all the way to the left side of the page, regardless of any taller elements that might block its positioning.
) below.
) to up-vote the contribution!
…and that some of the experts/moderators will chip in with any further clarification, correction, or confirmation of this.
