CODEWITHSUNDEEP
javascripthtmlcsspositionpadding
DerpyNerd
DerpyNerd

Reputation: 4803

convert padding from pixels to percentage

I've been looking around in existing threads to find a solution, but nothing applies to my specific situation.

I have a hyperlink with absolute positioning inside a relative positioned div. padding and margins are defined with pixels, but I want to redefine them in percentages.

for example, this:

<a id="original" href="www.google.com" style="display: inline-block; position:absolute; left: 150px; top: 300px; padding: 100px 100px;" />

becomes this:

<a id="inserted" href="www.google.com" style="display: inline-block; position: absolute; left: 18.38235294117647%; top: 28.40909090909091%; padding: 9.469696969696969% 12.254901960784313%;"></a>

This jsfiddle example shows what I want to achieve. But you'll notice that the size of the converted paddings aren't as large (in height) as the original link.

Hopefully my description is clear enough. Otherwise, let me know ;)

Upvotes: 1

Views: 3324

Answers (1)

mulla.azzi
mulla.azzi

Reputation: 2676

When you are specifying padding in percentage, its in reference with Width and not height. So you have to specify the value as

a.style.padding = aWidth / 816 * 100 + "%" +
                  aWidth / 816 * 100 + "% ";

Click here for modified Sample code

Workaround for this can be found Here

Upvotes: 1

Related Questions