I’m creating an online screenwriting program using HTML and CSS. The format of screenplays consists of scene headings, dialogs, and action elements. Each element is in a DIV with its own set of css rules (left and right padding and margins are the real differences). The formatting of the script is great. But now, I need to put the formatted text into pages. Meaning, once the formatted text reaches the bottom of the 8.5in x 11in DIV, it needs to be cut off and continue into the next div. Initially I was thinking I’d have to calculate the width and height of each different inner div element and then truncate when appropriate. Wonder if there’s an easier way. I’m also using Smarty templates. I’ve attached a photo for reference