Div overlap the other

0

Colleagues.

I want to put a text on a div, but as I change the size of the div, the text decreases and ends up breaking. See the image:

ThecodeI'musingisthis:

<divstyle=\"width: 300px; height: 20px; background-color: #FFF; border: 1px solid #000\">
   <div style=\"position: absolute; width: ".$porcentagem."%; height: 19px; line-height:17px; background-color: #F00;\">
      <div style='position: relative'>Estoque final (".$porcentagem."%)</div>
    </div>
</div>
    
asked by anonymous 21.03.2017 / 15:15

2 answers

3

Following your line of reasoning, I put a position: absolute and a width: 300px in the div that contains the text with the percentage. I also changed the% w / o% that was in the div that controls the color to% w / o, so the color does not exceed the div boundary when the value is 100%.

<div style="width: 300px; height: 20px; background-color: #FFF; border: 1px solid #000">
    <div style="position: relative; width: ".$porcentagem."%; height: 20px; line-height:20px; background-color: #F00;">
        <div style='position: absolute; width:300px;'>Estoque final (".$porcentagem."%)</div>
    </div>
</div>

    
21.03.2017 / 15:31
1

I solved your problem by putting the text div with position: absolute; and setting the width of it with 300px (parent div size).

I have set an example here in JSFiddle for you to see.

 <div style='position: absolute; width: 300px'>Estoque final (44%)</div>
    
21.03.2017 / 15:25