Problem with css float

Asked

Viewed 90 times

0

We created this code below to simulate the same problem on a site I’m developing to practice my html and css. I have two elements that float to the left and one to the right but when I clear the float of the second element the third element (right) is pushed down. how do I fix this? html:

<div class="primeiro"></div>
<div class="segundo"></div>
<div class="terceiro"></div>



**css:**
    div{
    width: 20px;
    height: 20px;
    background: pink;
    border: 2px solid black;
    }

.primeiro{
  float: left;
}

.segundo{
 float: left;
 clear: left;
}

.terceiro{
  float: right;
}
css float

  • The third comes after the second, so it will be on the same line as the second. You wanted the third to be on the same line as the first?

  • blz.... did not know that floating elements respected hierarchy... Valew

  • Dude, in this case it’s not even hierarchy, it’s the flow of the same elements. They’re brothers, there’s no hierarchy. At least I understand hierarchy as father and sons, a tree.

  • The answer didn’t answer? Is there a problem? Please ask or mark to give the question as solved. Abs!

1 answer

0

The elements obey the fluidity where they are arranged. The third div will always be next to the second with float: right.

Putting clear: left in the second div, you’re saying that nothing can be on the left side of that div, soon it will be below the first, and the third will be on the same line as the second, but on the right side.

It is not even a question of hierarchy, since the elements are brothers. The 3 divs are in the same hierarchy. Only the second div could be on the same line as the first with float: right, since she is the next element.

In your case, the third div will be on the same line as the second, because it is the next element.

Browser other questions tagged css float

You are not signed in. Login or sign up in order to post.