Float right doesn't work right in CSS

Question

I created a sample for float right in CSS. However, I have a problem with the order and space between elements. This is the result:

The gray dots should be one right side of and even to the green dots.

Any thought? Thanks,

This is my code sample: https://jsfiddle.net/dalenguyen/mfj78LL5/

.green-dot {
  color: #20b08f;
}
.gray-dot {
  color: grey;
}
.professional-skills .green-dot,
.professional-skills .gray-dot {
  float: right;
  font-size: 1.5rem;
}

<div class="professional-skills">
  <h2>Professional Skills</h2>
  <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p>
  <p>Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot">&#x25cf; &#x25cf;</span></p>
</div>
</div>

score 4 · Accepted Answer · edited May 23 '17 at 12:34

The CSS float property was never designed for building layouts.

It was designed for wrapping text around images.

Because CSS didn't offer a better layout system, floats (and tables, inline-block and absolute positioning) have been used as hack workarounds.

But now that CSS3 flex and grid modules have wide browser support, and they are specifically designed for building layouts, you should consider using them.

section {
  display: flex;
}

section > * {
  margin: 0;
  align-self: center;  /* 1 */
}

section > p {
  margin-right: auto;  /* 2 */
}

.green-dot {
  color: #20b08f;
  font-size: 1.5rem;
}

.gray-dot {
  color: grey;
  font-size: 1.5rem;
}

<article class="professional-skills">

  <h2>Professional Skills</h2>

  <section>
    <p>Web Design</p>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
  </section>

  <section>
    <p>Design</p>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="gray-dot">&#x25cf;</span>
    <span class="gray-dot">&#x25cf;</span>
  </section>

</article>

Notes:

Learn about the align-self property here:
- How does flex-wrap work with align-self, align-items and align-content?
Learn about auto margins here:
- In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

score 1 · Answer 2 · answered May 01 '17 at 13:50

1

You can update the following:

.professional-skills .green-dot, .professional-skills .gray-dot
{
  float: right;
  font-size: 1.5rem;
  padding-right:5px;
}

and it will work but it's better to keep each circle in a sperate DIV.

answered May 01 '17 at 13:50

Mhd.Jarkas

406
2
5
11

Thanks @Mhd Jarkas. It's a quick solution that works. – Dale Nguyen May 01 '17 at 14:47

score 1 · Answer 3 · answered May 01 '17 at 13:54

When using float:right; the element that is the furthest is always the one that is present before in the HTML code. If you want your gray dots to be right to your green dots, you have to insert them first in your HTML.

Also, as said before, you will probably want to split up your dots into separate containers, that way you will have a complete control over spacing (instead of using spaces between your dots). See Mhd.Jarkas's answer.

Hope it helps!

Yes, it does. I got lots of solutions here. – Dale Nguyen May 01 '17 at 14:46 — Dale Nguyen, May 01 '17 at 14:46

Stickers · Answer 4 · 2017-05-01T19:52:17.160

The uneven spacing is caused by float: right;, in your example there are 2 spans in the second row compare to only 1 span in the first row, and floating removes the white space rendering between the tags.

You can wrap every single dot into a span, that will fix the spacing issue, and be aware of the reversed order that caused by floating.

.green-dot {
  color: #20b08f;
}

.gray-dot {
  color: gray;
}

.professional-skills .green-dot,
.professional-skills .gray-dot {
  float: right;
  font-size: 1.5rem;
  margin-left: 5px;
  margin-top: -5px;
}

<div class="professional-skills">
  <h2>Professional Skills</h2>
  <p>
    Web Design
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
  </p>
  <p>
    Design
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="green-dot">&#x25cf;</span>
    <span class="gray-dot">&#x25cf;</span>
    <span class="gray-dot">&#x25cf;</span>
  </p>
</div>

score 0 · Answer 5 · answered May 01 '17 at 13:54

Try this

.green-dot,.green-dot-1 {
  color: #20b08f;
}
.gray-dot,.gray-dot-1 {
  color: grey;
}

.professional-skills .green-dot, .professional-skills .gray-dot{
  float: right;
  font-size: 1.5rem;
}
#dots{
font-size: 1.5rem;
float : right;
}
#abc{
float: left;
}
#clear {
clear: both;
}
.green-dot-1{
padding-right: 5px;
}

<div class="professional-skills">
  <h2>Professional Skills</h2>
  <p>Web Design <span class="green-dot">&#x25cf; &#x25cf; &#x25cf; &#x25cf; &#x25cf;</span></p>
  <p id="abc">Design </p>
<div id="dots">  
  <span class="green-dot-1">&#x25cf; &#x25cf; &#x25cf;</span><span class="gray-dot-1">&#x25cf; &#x25cf;</span>
  </div>
  <div id="clear"></div>
</div>
</div>

Thanks @Nimish for you help. – Dale Nguyen May 01 '17 at 14:46 — Dale Nguyen, May 01 '17 at 14:46

Float right doesn't work right in CSS

5 Answers5