Question

I have a html layout done using absolutely positioned div elements and a backgroung image. I want to keep the layout the same vertically (each individual part/page representing a data set). I do not wan’t to change the div positioning from absolute as this messes up things and I am running out of time for this.

I realize I can have multiple body tags each for every data set and as this html will finally be generated from xml using xslt this is not a problem.

The issue is that as the div elements are absolute they do not appear in the subsequent body tag (only background image appears). I tried changing to relative and the div actually moves to ‘next page’ (body element), but as there are several divs, when all are laid out they get misaligned.

I will be grateful for some advice on how to tackle this either by fixing my html in some way that will not be too time consuming or by using a tool that can combine several html content in to one flowing page. Any other piece of advice is also very welcome.

Answer 1

From what you’ve posted, which could really use some of your HTML as an example of what you’re trying to do exactly, you should be able to simply wrap each of your “pages” in a div with the position: relative CSS style.

The inner content will then be positioned absolutely from the boundaries of its parent wrap. You would then want to move most of the styles you currently have applied to your body element (like a background image) to the wrapper divs.

Basic example: http://jsfiddle.net/AsWCN/2/