1

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 ;)

DerpyNerd
  • 4,070
  • 5
  • 33
  • 74

1 Answers1

1

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

Community
  • 1
  • 1
mulla.azzi
  • 2,576
  • 3
  • 15
  • 23
  • It seemed weird to me, but it's working! I'll accept when I confirmed that this solution works in all situations. I want to scale the div while maintaining the correct position. – DerpyNerd Mar 10 '14 at 11:25