CODEWITHSUNDEEP
htmlcsswidthpercentage
Shazam
Shazam

Reputation: 13

CSS percentage width is not working

I am getting a weird problem while using CSS width property.

 <form action="#form2"  method="post" id="form1" name="form1">
  <ul id="flx-skill" style="display:inline;">                               
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%;">
                                        <span class="progress-60" style="width: 25%">
                                                <span></span>

This seems to work with width as 25%. But for another form when I'm entering width as 50%. It's not working and instead it is taking as 50px.

<ul id="flx-skill" style="display:inline;">                             
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%;">
                                        <span class="progress-60" style="width: 50%;">
                                            <span></span>

Kindly let me know where I'm going wrong. Here's the link

Upvotes: 1

Views: 2900

Answers (1)

Francisco Maria Calisto
Francisco Maria Calisto

Reputation: 3260

The problem might be a percentage of something unspecified. 10% of 0 is equal 0. So in that way 10% of 1000px = 100px. If you write the height in pixels you are attributing a size.

You might need as well to make the positions relative, then width:100% and width: 50%; should work:

Your First Example

<form action="#form2"  method="post" id="form1" name="form1">
  <ul id="flx-skill" style="display:inline;">                               
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%; position: relative">
                                        <span class="progress-60" style="width: 25%; position: relative">
                                                <span></span>

Second Example

<ul id="flx-skill" style="display:inline;">                             
                     <li class="clearfix"><p class="span4" style="font-size:17px; color:black; text-shadow: 0px 0px 5px grey;"><b>1. Personal </b></p><p class="span4">2.  Medical</p><p class="span4">3. Lifestyle</p><p class="span4">4. Diet</p>
                                    <div class="progress-bar green animate" style="width:100%; position: relative">
                                        <span class="progress-60" **style="width: 50%;** position: relative">
                                            <span></span>

Do not forget to remove the syntax errors where you have width: 50%;.

Upvotes: 1

Related Questions