Can't get page-break-after to work

LyndonOHRC · Sep 23, 2015

I'm trying to design output for a badge card printer. I'm stuck trying to get a page break so I can design the back of the card. I've tried several ways to start page two but no luck. It always pushes the page two div to the top of page one and renders it behind that content. I've validated the code.

Any help appreciated.

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Camera Output</title>
</head>
<body>
		<div style="page-break-after: always;">
			
				<div style="
					position: absolute;
					top: 0;
					left: 0;
					padding:0; 
					width: 408px;
					height: 87px;
					text-align: center;
					margin: 0px;
					Border: 1px solid;
					color:Black;
					font-size: 20px;
					font-family: Calibri; 
					font-weight: bold;">
					<div style="position: absolute; width: 406px; bottom: 0; padding-bottom: 6px;">OKLAHOMA<br />HORSE RACING COMMISSION</div>
				</div>
			
			<div style="position: absolute;
						top:87px; 
						left: 0px;">
				<img src="44108-7895.jpg" width="180" height="225" alt="Badge Photo" style="border: 0px;">
			</div>
			<div style="position: absolute;
						top: 87px;
						left: 182px;
						width: 218px;
						font-family: Calibri; 
						font-weight: bold; 
						font-size: 12px; 
						text-align: center; 
						margin-right: 0px; 
						padding-top: 4px;
						text-align: center;">
				Expires 31 December
			</div>
			<div style="position: absolute;
						top: 93px;
						left: 182px;
						width: 218px;
						font-family: Calibri; 
						font-weight: bold; 
						padding-top: 8px; 
						text-align: center; 
						font-size: 48px;">
				2015
			</div>
			<div style="position: absolute;
						top: 133px;
						left: 182;
						width: 218;
						text-align: center; 
	 					padding-top: 12px;">
				<img style="border: 0px" src="okseal3b.gif" alt="State Seal" >
			</div>
	    	<div style="position: absolute;
						top: 312px;
						left: 0;
						width: 408px;
						font-family: Calibri; 
						font-weight: bold; 
						font-size: 24px;">
	    		Smith, Bob A<br />
				Administration
	    	</div>
		</div>	
<--- begin First div of page two --->
		<div style="width: 408px;
					font-family: Calibri; 
					font-weight: bold; 
					font-size: 24px; float:left">
		</div>
    </body>
</html>

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

LyndonOHRC · Sep 24, 2015

OK, I kept at it and answered my own question! I did not understand position and float. I changed all the {position} styling to the default value, {:static;}, and used {float: left;} to make the two-column second row. Then the {page-break-after: always;} style started working. [bigsmile]

This will work for this requirement as all the divisions on the badge card printing documents are static in size/position. I'll be getting rid of the <br /> tags and putting all content in <div>'s now that the page break issue is solved; this example should get someone started if they have this issue.

BTW, I'm not using a style sheet or tag because my server side is Coldfusion, its <cfdocument format="PDF"> tag doesn't seem to work unless you use the <div style=""> attribute.

Hope this helps someone.

HTML that works:

Code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Camera Output</title>
</head>

<body>

	
		<div style="page-break-after: always;">
			
				<div style="
					top: 0;
					left: 0;
					padding:0; 
					width: 408px;
					height: 87px;
					text-align: center;
					margin: 0px;
					Border: 1px solid;
					color:Black;
					font-size: 20px;
					font-family: Calibri; 
					font-weight: bold;">
					<div style="width: 406px; bottom: 0; padding-bottom: 6px;">OKLAHOMA<br />HORSE RACING COMMISSION</div>
				</div>
			
			<div style="
					float:left;
					top:87px; 
					left: 0px;">
				<img src="test_my64.jpg" width="180" height="225" alt="Badge Photo" style="border: 0px;">
			</div>
			<div style="
					float:left;
					top: 87px;
					left: 182px;
					width: 218px;
					font-family: Calibri; 
					font-weight: bold; 
					font-size: 12px; 
					text-align: center; 
					margin-right: 0px; 
					padding-top: 4px;
					text-align: center;">
				Expires 31 December
			</div>
			<div style="
					float:left;
					top: 93px;
					left: 182px;
					width: 218px;
					font-family: Calibri; 
					font-weight: bold; 
					padding-top: 8px; 
					text-align: center; 
					font-size: 48px;">
				2015
			</div>
			<div style="
					float: left;
					top: 133px;
					left: 182;
					width: 218;
					text-align: center; 
					padding-top: 12px;">
				<img style="border: 0px" src="okseal3b.gif" alt="State Seal" >
			</div>
	    	<div style="
					top: 312px;
					left: 0px;
					width: 408px;
					font-family: Calibri; 
					font-weight: bold; 
					font-size: 24px;">
	    		Smith, Bob A<br />
				Administration
	    	</div>
		</div>
		<div style="
				width: 408px;
				font-family: Calibri; 
				font-weight: bold; 
				font-size: 24px;">
			Property of
		</div>
	



    </body>
</html>

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Can't get page-break-after to work

LyndonOHRC

Programmer

LyndonOHRC

Programmer

Similar threads

Part and Inventory Search

Sponsor