Float statement is breaking a block level element?

Question

I am trying to make the I rate it ??/?? to be perfectly aligned in the center and floating in the left, so the I rate it ??/?? word(s) will have a perfect vertical shape. When I do it, the float statement breaks the block level element and go outside of it. This is an example:

li {
  display: block;
  background: green;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 20px 0px 20px 10px;
}

span.rate {
  color: #fff;
  margin-right: 65px;
  padding: 20px 10px;
  float: right;
  background: rgb(10, 10, 10);
}


  Text1I rate it 10/10
  Text2 Text Text Text Text TextI rate it 6/10
  Text5I rate it 9/10
  Text9 Text TextI rate it 2/10

Here is another example, but without the float statement. It looks perfect, but without the float: right; statement, it's not vertically aligned at all. It's not perfectly aligned like the first one:

li {
  display: block;
  background: green;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 20px 0px 20px 10px;
}

span.rate {
  color: #fff;
  margin-right: 65px;
  padding: 20px 10px;
  background: rgb(10, 10, 10);
}


  Text1I rate it 10/10
  Text2 Text Text Text Text TextI rate it 6/10
  Text5I rate it 9/10
  Text9 Text TextI rate it 2/10

In the end. I want the I rate it ??/?? to be:

1- Perfectly align vertically.

2- Perfectly fit inside the block level element.

user_1112631 · Answer

You could use flexbox to solve your problem. Setting display: flex to make the element use flexbox, and then setting justify-content: space-between;(maximize space between elements) & align-items: center; (center the elements horizontally)

li {
  display: flex;
  background: green;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 0px 0px 0px 10px;
  justify-content: space-between;
  align-items: center;
}

span.rate {
  color: #fff;
  margin-right: 65px;
  padding: 20px 10px;
  background: rgb(10, 10, 10);
}


  Text1I rate it 10/10
  Text2 Text Text Text Text TextI rate it 6/10
  Text5I rate it 9/10
  Text9 Text TextI rate it 2/10

user_15335954 · Answer

You can mix display: flex; and position: absolute; to do so

li {
  display: flex;
  background: green;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 20px 0px 20px 10px;
  justify-content: flex-start;
  align-items: center;

}

span.rate {
  color: #fff;
  position: absolute;
  right: 0;
  padding: 20px 10px;
  background: rgb(10, 10, 10);
  width: 11ch;
}


  Text1I rate it 10/10
  Text2 Text Text Text Text TextI rate it 6/10
  Text5I rate it 9/10
  Text9 Text TextI rate it 2/10

EDIT:

To avoid the text being hidden you could also use display: grid;

li {
  display: grid;
  grid-template-columns: 1fr 11ch;
  background: green;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding-left: 10px ;
  justify-content: flex-start;
  align-items: center;

}

span.rate {
    color: #fff;
    padding: 10px 0 10px;
    background: rgb(10, 10, 10);
    width: 12ch;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}


  Text1I rate it 10/10
  Text2 Text Text Text Text TextI rate it 6/10
  Text5I rate it 9/10
  Text9 Text Text azlkejalzkje alkjez alkzj ealk zjeal zkjeal kzjea lzkej  eazmlk emalkz emaklz emlkaz melkaz emlkaz emlka zemlk 12345678I rate it 2/10

user_5265084 · Answer

You could use absolute & relative positioning. This way you have the most control over the positioning and will make sure the height is always 100%. Simple and clean.

li {
  display: block;
  background: green;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 20px 0px 20px 10px;
  position: relative;
}

span.rate {
  color: #fff;
  margin-right: 65px;
  padding: 20px 10px;
  background: rgb(10, 10, 10);
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}


  Text1I rate it 10/10
  Text2 Text Text Text Text TextI rate it 6/10
  Text5I rate it 9/10
  Text9 Text TextI rate it 2/10

Float statement is breaking a block level element?

3 Answers