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?

Answer 1

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/