2

I'm new to CSS and banging my head against a wall trying to figure out why when I have 2 elements floated right and one left that the third doesn't show up in the middle.

#red {
  width: 250px;
  height: 250px;
  background-color: red;
  float:left;
}

#yellow {
  width: 250px;
  height:250px;
  background-color: yellow;
  float:right;
 }


#blue {
  width: 250px;
  height:250x;
  background-color:blue;
}
<p id="red">This is bullshit.</p>

<p id="yellow">It is taking me way to long to figure out.</p>

<p id="blue">WTF?</p>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
creativewebdame
  • 45
  • 3

3 Answers3

1

I higly recomended to use flexbox for this issue.

.container {
  display: flex;
  justify-content: space-between;
}

   #red { width: 250px; height: 250px; background-color: red;  } 
   #yellow { width: 250px; height:250px; background-color: yellow; } 
   #blue { width: 250px; height:250x; background-color:blue; } 
<div class="container">
  <p id="red">This is bullshit.</p>
  <p id="yellow">It is taking me way to long to figure out.</p>
  <p id="blue">WTF?</p>
</div>
Maik Lowrey
  • 15,957
  • 6
  • 40
  • 79
1

I also recommended you to use Flex Box Property (Flexbox Guideline ), though if you wants to fix it with trinational way here is the solution for you:
First you have to understand that by default p tag is display block property so you have to make it as inline block, like span tag, and make the overflow hidden so it will not take any additional space. 

#red,#yellow,#blue{
  display: inline-block;
  overflow: hidden;
}

#red {
  width: 150px;
  height: 150px;
  background-color: red;
  float: left;

}

#yellow {
  width: 150px;
  height:150px;
  background-color: yellow;
 }


#blue {
  width: 150px;
  height:150px;
  background-color: blue;
}
<p id="red">This is bullshit.</p>

<p id="yellow">It is taking me way to long to figure out.</p>

<p id="blue">WTF?</p>
Mushfiqur Rahman
  • 472
  • 3
  • 13
0

The problem arises because the third element is a p element which is not an inline element by default.

See MDN

The float CSS property places an element on the left or right side of its container, allowing text and inline elements to wrap around it.

Try setting blue to display: inline and you will see the difference.

If you genuinely need the red and yellow to float, that is, for the blue stuff to be in the middle and then wrap around, then obviously stick to float. If that is not required then investigate flex or grid.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • we actually don't need to make the yellow to float, it will automatically float you can see my solution below you answer, -happy coding :) – Mushfiqur Rahman May 11 '22 at 19:17
  • @MushfiqurRahman I don’t understand your comment as the requirement was for it to float right. It does not do this in your answer. – A Haworth May 11 '22 at 19:20
  • Hi @A Haworth, as you mentioned on your answer that we need to make the red and yellow to float, but we can make all box position side by side only making the red box float only – Mushfiqur Rahman May 11 '22 at 19:26
  • He wanted the blue in the middle of the red and yellow. – A Haworth May 11 '22 at 20:42