CODEWITHSUNDEEP
htmlcssresponsive-designposition
flyingduck92
flyingduck92

Reputation: 1654

How to push span inside a div to right and make this text inside responsive

I am trying to make bar skills. I made it create one. However there are some problem.

How to make this span float to right? i tried to use float didn't work. Any suggestion? And whenever I am trying to shrink the screen the text too small

* {box-sizing: border-box}

.flex {
	display: flex;
    margin-bottom: 10pt;
}

.bar { 
	width: 100%;
    background-color: #ccc;
    line-height: 18pt;
}

.fill {
 	background-color: #7ef57e;
}

.tag {
	text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    width: 25%;
    background-color: #00A1A7;
    font-size: 2vw;
    float: left;
    padding-left: 1%;
}

span.value {
    float: right;
    font-size: 2vw;
    z-index: 1;
    
}
<body>
  <div class="bar flex">
  	<div class="bar fill" style="width: 75%">
    	<div class="tag">Javascript</div>
    </div>
    <span class="value">75%</span>
  </div> 

</body>

Upvotes: 1

Views: 707

Answers (1)

P.S.
P.S.

Reputation: 16384

You already set the width of div at the same level to 75%, so now you can just use other 25% for the span tag, this way it should fill all remaining space. And after that, you can simply align text of the span to the right side via text-align: right. Here is a live example:

* {
    box-sizing: border-box
}

.flex {
    display: flex;
    margin-bottom: 10pt;
}

.bar { 
    width: 100%;
    background-color: #ccc;
    line-height: 18pt;
}

.fill {
    background-color: #7ef57e;
}

.tag {
    text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    width: 25%;
    background-color: #00A1A7;
    font-size: 2vw;
    float: left;
    padding-left: 1%;
}

span.value {
    text-align: right;
    width: 25%;
    font-size: 2vw;
    z-index: 1;
}
<body>
  <div class="bar flex">
    <div class="bar fill" style="width: 75%">
      <div class="tag">Javascript</div>
    </div>
    <span class="value">75%</span>
  </div> 
</body>

Upvotes: 1

Related Questions