FAQ: CSS Display and Positioning - Float


#1

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!


#2

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


#3

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.


FAQ: CSS Display and Positioning - Clear
#4

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


#5

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.


#6

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:


#7

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


#8

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


#9

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?


#10

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.