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!
On the .question's, include a clear: both; (or left) property and that should fix it. Above, the float is still in effect.
We should consider how the term float came into being. It is an old typography term that refers not to the element itself, but the surrounding content. float: left; says the content will float around the object to the left of it. This permits that object to remain in normal flow. Repeated float: left; will appear inline.
Compare this to an absolutely positioned object on the left. Content will not float around it, but will have the same relative top, left reference, so will be partially obscured by that object.
?
When they are all given a float: left property, they will retain normal flow and appear in the order they are tagged. However, if they are given a float: right property they will be reversed, and bound to the right margin, rather than the left. Be sure to set clear: both on the .question if you want to test this.
Thank you mtf, I did set clear: both on the question class but it still switches places when I set float to right or left (.answer)
The lesson states: “right - this value will move elements as far right as possible.” So I don’t understand why don’t they just move to the right instead of switching places…
I will keep reading and researching
When we float to the right, the normal flow is reversed since the first element gets drawn first, so it will go to the far right. The second will get drawn, so will be ine middle, the third element gets drawn last, so will be the leftmost.
In the old days, when we combine float: left and float:right to the same row of elements, we would always float: right, first, then float left second. Dig around for some articles form the early days, 1998 - 2004 era for more discussion on this. A lot has changed since then so I cannot say if this rule of thumb still applies.
In this lesson, it is stated that “Floated elements must have a width specified”. However, in the exercise, we apply a ‘float’ property to the “.answer” elements, which do not have a width specified. Why is this the case?
It may be the case that the browser is calculating the width based on content, but I won’t defend this answer. A width is necessary to aid the browser in determining how much space to take out of normal flow to accommodate the float.
Recall that the object with that property is not floating, but the content is floating around it. This takes calculation on the browser’s part.
That’s a really difficult behavior to understand based on the information in the course.
Just from observing this behaviour, all I can figure is that if you float an inline-block element left, then place a block element after it. The normal behviour of the block element to start a new line is prevented. The block elements still have line breaks after them, but not before.
What’s going on? Is it that if you float an inline-block element in either direction, other elements ignore the vertical space they take up or something?
This was posted a while ago, but I imagine other people will be looking for this answer, because the lesson is really unclear about this.
It works because inline-block elements set their width based on the content within them, so you don’t need to specify the width explicitly.
What I think they’re trying to explain in the lesson is that you can float block elements as well, but only if you specify the width. So if you were to write something like a blog post, and you wanted a picture with text wrapped around it, you can introduce it (along with a caption) in a block container like a div, set the width explicitly and float it either left or right. The text would then wrap around it in the same way as it does if you set a picture positioning to ‘wrap text’ rather than ‘inline’ in MSword.
Maybe inline-block is a newer display type and that piece of advice in the lesson is left over from before they existed.
Bit of a pun, that. The solution to this problem requires that we clear floats before each new row of elements. If that instruction has not surfaced, yet, then it will follow immediately.
Thanks, I think I eventually figured out what’s going on.
The use of clear is shown in the next lesson, but the why and how of it is not explained. It’s looks like it’s something to do with what float was designed for, which I’m guessing is wrapping text around pictures as you might in an article.
It seems to me that float is not really the right tool for a situation like this. You’d probably want to use align: left wouldn’t you?
Normal flow defaults to left alignment, but block level elements take a new line. float creates a break in normal flow that ends up keeping all floated elements on the same line. The clear property is how we restore normal block flow.
It takes some practice and experimentation to get a handle on using float but it is time well spent. Don’t be discounting this technique.
Floated elements must have a width specified, as in the example above. Otherwise, the element will assume the full width of its containing element, and changing the float value will not yield any visible results.
Does this only apply to block elements? I’m assuming this because, by default, block elements take up the whole width of the browser. However, it can be changed using the width property
) below.
) to up-vote the contribution!
