quirky percentage interpretation in webkit
-
26-10-2019 - |
Question
Working on a responsive design and gradually losing hair and sleep. This one seems like a genuine webkit bug: http://jsfiddle.net/TAvec/
The problem is quite clear there - webkit interprets the 20% padding as 20% of the parent's content box, while firefox and opera interpret it as 20% of the parent's total box (including the parent's padding).
Any ideas how to work around this whilst retaining the absolute positioning?
Solution
You can wrap the content of your <aside>
in a div
and assign the padding to that, rather than to the <aside>
. That way you can ensure that the padding in both FF and Chrome (haven't tested O or IE) renders relative to the container i.e., the <aside>
.
<!-- HTML -->
<article>
<h1>Parent</h1>
<p>Content...</p>
<aside>
<div class="content">
<h1>Aside child</h1>
<p>The prime minister also suggested the move would have implications for the UK's EU and Nato membership.</p>
</div>
</aside>
</article>
//CSS
article{
background:chocolate;
padding-left:40%;
position:relative;
}
aside{
background:chartreuse;
position:absolute;
left:0;top:0;bottom:0;
width:20%;
}
article div.content { //'%' declarations relative to parent
width: 100%;
height: 100%;
padding: 20%;
border:20px solid black;
background-color: #fff;
}
Here it is in action: http://jsfiddle.net/KYyR7/3/