merging html pages with css

[cider123]

I'll try to keep it quick and simple. =)

I have an application that builds html pages on the fly that use css for positioning <Div> tags, etc. Works pretty well for the single pages.

The next step of the project is to combine all these single pages into 1 extensive html document.

Since each page has it's own css for positioning, those same positions would overlap each other if I inject the css into the header of the master document.

So what's the best approach for handling a situation like this?

In theory I could rebuild everything with tables, but I prefer working with CSS if at all possible.

Since the documents will vary in length, using absolute positioning when combining multiple documents won't really work because I'll never really know what to use for the 'top' locations, etc.

I'm curious if there is a better approach to this. Any feedback appreciated.

[NXInteractif]

Potentially, this issue could be resolved if you use relative positioning instead of absolute. Also, if you use a higher-level root div for each page that contains all pf its respective divs, you can then simply reposition the parent divs relative to eachother.
What are you using to generate the pages?

[cider123]

Pages are being generated by a custom C# engine I designed.

I know "relative;" is another option for "position: " in css tags, I just never understood their purpose. I'll have to play around with that design layout next.

What is the "pf" you talk about though?

Thanks for bumping me in the right direction though! I know just enough to be dangerous with HTML and CSS but I'm far from an expert on it. =)

[NXInteractif]

Sorry cider, that was a typo. pf = "of" haha.
But yeah, check out relative positioning for positioning the elements relative to the other pages.

[cider123]

I think I have it wired for the most part.

I'm sure it's probably just a setting I don't know about, but one little quirk I don't know how to fix at the moment:

2 <div> tags side by side (left to right) pushes the parent div tag height up.

I'm using Microsoft Expression Web 2 for layout design to figure out what I need to build for my code generator engine.

Let's see how well I can do ascii art for the example:

+-------------- (Div tag 1)---------+
!
!..+--(tag 2)--+....+--(tag 3)--+
!..!................!.....!................!
!..+-----------+...+-----------+
!

So based on where tag 3 is, either increases or decreases the height of tag 1.

I set <div> tag 1 height to 100px, but regardless it still pushed it out to 208px.

In Expression Web (as I'm sure with most editors) you can move <div> containers pixel by pixel using the cursor keys. As I lowered the position of <div> tag 3 it decreased the <div> tag 1 height value.

When I moved it back in place to be equal to the text in <div> tag 2, it increased the height value of the <div> tag 1 container (master).

So is this normal, or what options do I have to resolve this so I don't end up with a huge buffer of space below the <div> tag sections?

My concern is when I merge multiple documents using relative positioning, it will create huge gaps of space between sections / documents.

[cider123]

Hacking away at it after the post, I discovered if I set the "position:" to "absolute" in tag 3 then it lays out the way I wanted.

I'm guessing it doesn't matter if you use absolute on a div tag nested in a div tag that uses relative positioning?

I'll find out when I do the multiple document merge, but I'm thinking it will probably be ok.