Complex percentage interpretation in webkit

Question

Work on responsive design and gradual hair loss and sleep. This seems like a genuine webkit error: http://jsfiddle.net/TAvec/

The problem is pretty clear: webkit interprets 20% coverage as 20% of the parent content field, and firefox and opera interpret it as 20% of the original field (including the parent add-on).

Any ideas how to get around this while maintaining absolute positioning?

Answer 1

You can wrap the contents of your <aside> in a div and assign an addition to it, rather than <aside> . This way you can ensure that indentation in both FF and Chrome (not verified by O or IE) is displayed relative to the container, i.e. <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 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/