Why aren't the percentages I'm using for padding in my CSS working?


I am using percentages instead of pixels for padding in my CSS, but they aren't working.

.menu li a{ padding-left:5%; padding-right:5%;}

I want to use percentages to make the menu section responsive in all dimensions. How could I achieve this?

Problem courtesy of: designersvsoft


What you've written is technically fine. It might be getting overridden - but that is just one possibility. It will also depend on the width of the parent element.

Solution courtesy of: Stephen Newman


The % is working here but your anchor tag inside 'li' element don't have any width specified, that is why you are not able to see the effect.

If you want to see the effect, try by placing "width: 100px" in "#coolMenu li a" and you will see immediate effect of % padding.

Discussion courtesy of: vbjain

Hey now define pixel value in your anchor link

replace % in pixel value



Discussion courtesy of: Rohit Azad

This recipe can be found in it's original form on Stack Over Flow.