页面布局请避免对absolute布局的滥用，原因在于：

• absolute定位会导致当前块对父级高度和宽度塌陷，（浏览器在布局时，父级元素无法直接知道absolute子元素的高和宽），因此这个元素无法撑高父容器。

absolute定位也是兼容性的重灾区：

• absolute定位在IE6、7下 有兼容性问题，需要触发haslayout
• 触发完haslayout的块在IE7下有 布局bug
• absolute定位在IE6\7\8下的 z-index有兼容性问题 。absolute定位需要relative定位做辅助，而造成 relative定位的滥用，也将会使得z-index的bug难以控制 。
• absolute定位在IE6\7下对偏移量解析有 兼容性bug
• absolute定位在ie6、7下的 影响margin折叠bug ，以及另外一个 影响margin的bug
• absolute定位在IE6下，不指定left/top，出现的布局bug
• absolute定位在IE6下的奇偶bug：如果定位外框高度/宽度为奇数,则IE6下,绝对定位元素的底定位/右定位会有1像素的误差

楼主的要求是自适应。自适应更要慎用absolute布局。

定位这东西，margin或float定位往往更具有适应性，还轮不到absolute；就算我们确实应该使用absolute绝对定位，在绝大多数情况下，我们是不需要多余同时又不利于维护，留下潜在隐患的relative属性的；就算我们要使用relative相对定位来限制absolute在小范围内的定位，也不应该把relative属性放在最外层的标签上。——张鑫旭《 相对定位的最小化影响原则 》

当前跨手机和桌面端的页面，主流的布局方案是：弹性布局（流体布局）+media query查询。即：

• 弹性自适应布局（宽度设置为相对父级的百分比 + min-width/max-width）
• 水平方向上的混排使用float/display-inline-block
• 设置视口user-scalable=no
• 针对移动端采用media query做更细的调节

请楼主先看一下常用CSS布局方法，构建页面时粘几个js/css插件，或用几个兼容性堪忧的css3草案属性，难以应对以后的重构。

• 网页布局思想浅议

深入机理，楼主可以读一下：

• float定位与清除浮动 ① ②
• display:inline-block布局