FAQ: CSS Display and Positioning - Float

This community-built FAQ covers the “Float” exercise from the lesson “CSS Display and Positioning”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn CSS

FAQs on the exercise Float

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 (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 (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

When the answers are floated left, why do they appear inline with some of the questions?

2 Likes

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.

3 Likes

I just tried this and when the answers are floated to the left, the agree and disagree switch places…why?

Are your answers marked up like so,

    <div class="answer">
      <h3>Disagree</h3>
    </div>

    <div class="answer">
      <h3>Neutral</h3>
    </div>

    <div class="answer">
      <h3>Agree</h3>
    </div>

?
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 :slight_smile:

1 Like

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.


edit 190213: to

3 Likes

more explanation on this word. “This works for static and relative positioned elements.”

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?

1 Like

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.

2 Likes

If you set the .answer divs to float:left, this is what happens

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.

Is that right? It’s really weird.

scratch that, that can’t be right, because if you float them to the right, this happens:

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.

Atom reports an error in style css. The error reads:
" float can’t be used with display: inline-block."
Why is that?

float takes its element out of normal flow so any display property on that same element will be ignored.

1 Like

When I render the code with the modification in the box 2 with float: right; happens this:



And, when I render the code with the modification in box 1 with float: right; happens this:


Why the 1st box can be totally up to the right and the 2nd box not? Does the box 1 affects the box 2 to not go up at all?