I have never had a position:absolute compatibility issue on touch devices, are you sure you don't confuse it with fixed ? In addition, padding works great in all browsers unless you install IE in quirks mode, and you definitely don't want this for many reasons.
I would use the position: absolute in your layout, this makes sense, since you are squeezing everything inside the body without having a natural scroll stream.
Absolute positioning also has a big advantage; you can f.ex do left:250px;right:0 , and it will expand the available area with a left margin of 250 pixels. I think this is a more logical way to program the liquid layout inside the container instead of hacking the negative fields and using a float.
Another important aspect: using absolute positioning, you can also move the DIV article over the sidebar in the order of content . This is something that many people forget, in most cases for screen readers and search engines it makes more sense to get to the content as quickly as possible.
The disadvantage of this is that IE6 and below do not play the ball, but there are simple workarounds described in this article (as you will see).
The use of floats is still an option, but, as I mentioned, this can cause a big headache, as they are intended for a partial natural flow of layouts.
I would also put an iframe inside the #article div, it makes sense to separate it from the layout grid.
Something like this
<div id="header">Head</div> <div id="article"> <iframe src="http://cnn.com"></iframe> </div> <div id="sidebar">Sidebar</div>
And CSS:
html,body { width:100%; overflow:hidden; } #header { position:absolute; left:0; right:0; height:49px; border-bottom:1px solid #000; } #sidebar { position:absolute; top:50px; bottom:0; width:249px; border-right:1px solid #000; } #article { position:absolute; top:50px; left:250px; right:0; bottom:0; } #article iframe { border:none; width:100%; height:100%; }
Finally some magic for IE5 and IE6 (if you want to go this far):
<!--[if lt IE 7]> <style> body, #header { width:100% } #sidebar, #article{ height: expression(document.body.clientHeight-50) } #article{ width: expression(document.body.clientWidth-250) } </style> <![endif]-->
In terms of compatibility , this should be about as compatible as it gets. It works without javascript and its fluids (or "responsive" as it is called now), so it should work in many different screen sizes. You might want to add some media queries to shuffle the layout on the smallest screens, though, depending on how you do the default scaling.
When it comes to speed , there is one big bottleneck regarding rendering speed, and that is the DOM manipulation with javascript. Just leave it and you will make good use of whatever CSS technique you want. (Agreed, the IE5 / 6 expression is not the fastest way to render, but it works great, and we're talking about serious support here ...)
On may argue that using HTML5 elements such as ASIDE , ASIDE and ARTICLE would be appropriate, but you will need an HTML5 script to make this work in some versions of IE, and then you will lose some compatibility for those who have installed javascript.