Div overlap the other

Question

Div overlap the other

Navigation

#1 by (3 votes)
#2 by (1 votes)

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>

css

asked by anonymous 21.03.2017 / 15:15

2 answers

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

Duplicate multiple Table Records at once Effect of pie div

score 3 · Accepted Answer

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>