Add or Avoid Page Breaks in HTML PDFs with C#
Control page breaks in PDF documents by adding page-break-after: always; to HTML elements or preventing breaks with page-break-inside: avoid; when converting HTML to PDF using IronPDF in C#.
IronPDF supports page breaks within PDF documents. One major difference between PDF documents and HTML is that HTML documents tend to scroll whereas PDFs are multi-paged and can be printed. When converting HTML strings to PDF, developers often need precise control over where pages break to ensure professional-looking documents.
Quickstart: Implementing Page Breaks in HTML to PDF ConversionConvert HTML to PDF with page breaks using IronPDF. This example demonstrates inserting a page break after specific HTML content to ensure proper pagination. By adding the page-break-after: always; style, developers control where page breaks occur, improving readability and organization of the resulting PDF document. <div> <section> <article> <div> page-break-inside DIV page-break-inside: avoid page-break-inside: avoid DIV <thead> page-break-inside: avoid page-break-after: always page-break-before: always orphans widows break-inside break-after break-before
-
1Install IronPDF with NuGet Package Manager
-
2Copy and run this code snippet.
new IronPdf.ChromePdfRenderer() .RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>") .SaveAs("pageWithBreaks.pdf");Dim Renderer = New IronPdf.ChromePdfRenderer() Renderer.RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>").SaveAs("pageWithBreaks.pdf")Dim Renderer = New IronPdf.ChromePdfRenderer() Renderer.RenderHtmlAsPdf("<html><body><h1>Hello World!</h1><div style='page-break-after: always;'></div></body></html>").SaveAs("pageWithBreaks.pdf") -
3Deploy to test on your live environment
Start using IronPDF in your project today with a free trial
Minimal Workflow (5 steps)

- Download C# library to use page breaks in PDF
- Apply Page Breaks to HTML string and convert it to PDF
- Set avoid on
page-break-insideattribute to avoid Page Breaks in Images - Do the same for tables to avoid Page Breaks in Tables
- Set style at the CSS Level
How Do I Add a Page Break in HTML to PDF?
To create a page break in HTML, use this in your HTML code:
<div style="page-break-after: always;"></div>
The page-break-after CSS property is the most reliable method for controlling pagination when rendering HTML to PDF. This property tells the PDF renderer to insert a page break immediately after the element containing this style. When working with custom margins or specific page layouts, page breaks ensure content appears exactly where intended.
Why Does page-break-after Work Better Than Other Methods?
In this example, I have the following table and img in my HTML, and I want them on two separate pages by adding a page break after the table. The page-break-after property provides more consistent results across different rendering engines compared to alternatives like page-break-before or manual spacing. When creating new PDFs with complex layouts, this approach ensures predictable pagination.
What Elements Should I Use for Page Breaks?
Page breaks work effectively with block-level elements like div, section, and article. While you can apply page break styles to various HTML elements, wrapping content in a dedicated div provides the most reliable results. This is particularly important when working with headers and footers that need to appear consistently across pages.
Table
<table style="border: 1px solid #000000">
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
Image
<img src="/static-assets/pdf/how-to/html-to-pdf-page-breaks/ironpdf-logo-text-dotnet.svg" style="border:5px solid #000000; padding:3px; margin:5px" />
How Do I Implement Page Breaks in C# Code?
using IronPdf;
const string html = @"
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");using IronPdf;
const string html = @"
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");Imports IronPdf
Private Const html As String = "
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"
Private renderer = New ChromePdfRenderer()
Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")Imports IronPdf
Private Const html As String = "
<table style='border: 1px solid #000000'>
<tr>
<th>Company</th>
<th>Product</th>
</tr>
<tr>
<td>Iron Software</td>
<td>IronPDF</td>
</tr>
<tr>
<td>Iron Software</td>
<td>IronOCR</td>
</tr>
</table>
<div style='page-break-after: always;'> </div>
<img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"
Private renderer = New ChromePdfRenderer()
Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")The code above generates a PDF with 2 pages: the table on the first page and the img on the second:
How Do I Prevent Page Breaks in Images?
To avoid a page break within an image or table, use the CSS avoid attribute applied to a wrapping div element. This technique is essential for maintaining visual integrity when debugging HTML with Chrome to ensure your PDFs render exactly as intended.
<div style="page-break-inside: avoid">
<img src="no-break-me.png" />
</div>
Why Should I Wrap Images in DIV Elements?
Wrapping images in div elements provides better control over page break behavior. The page-break-inside property works most reliably on block-level elements. Images are inline elements by default, so wrapping them ensures the style is properly applied. This approach is particularly useful when working with responsive CSS layouts that need to maintain their structure in PDF format.
What Are Common Issues With Image Page Breaks?
Common issues include images being split across pages, partial rendering at page boundaries, and loss of captions or associated text. These problems often occur when images are near the bottom of a page. Using the page-break-inside: avoid wrapper prevents these issues by ensuring the entire image and its container move to the next page as a unit.
using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");using IronPdf;
// Example showing how to prevent image breaks in a more complex layout
const string htmlWithProtectedImage = @"
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage);
pdf.SaveAs("ProductGallery.pdf");Imports IronPdf
' Example showing how to prevent image breaks in a more complex layout
Const htmlWithProtectedImage As String = "
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>"
Dim renderer As New ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage)
pdf.SaveAs("ProductGallery.pdf")Imports IronPdf
' Example showing how to prevent image breaks in a more complex layout
Const htmlWithProtectedImage As String = "
<html>
<head>
<style>
.no-break { page-break-inside: avoid; }
.image-container {
border: 2px solid #333;
padding: 10px;
margin: 20px 0;
}
</style>
</head>
<body>
<h1>Product Gallery</h1>
<p>Our featured products are displayed below:</p>
<div class='no-break image-container'>
<img src='product1.jpg' alt='Product 1' />
<p>Product 1 Description</p>
</div>
<div class='no-break image-container'>
<img src='product2.jpg' alt='Product 2' />
<p>Product 2 Description</p>
</div>
</body>
</html>"
Dim renderer As New ChromePdfRenderer()
Dim pdf = renderer.RenderHtmlAsPdf(htmlWithProtectedImage)
pdf.SaveAs("ProductGallery.pdf")How Can I Avoid Page Breaks in Tables?
As shown above, page breaks within tables can be avoided using the CSS avoid. This is better applied to a wrapping div than to the table itself to ensure the style is applied to a block-level HTML node. When creating comprehensive HTML to PDF tutorials, proper table formatting is crucial for readability.
When Should I Use thead for Table Headers?
To duplicate table headers and footers across every page of a large HTML table spanning multiple PDF pages, use a thead group within the table:
<thead>
<tr>
<th>C Sharp</th><th>VB</th>
</tr>
</thead>
The <thead> element ensures that table headers repeat on each page when a table spans multiple pages. This is particularly useful for financial reports, data listings, and any document where context is needed on every page. For initial setup and installation overview, IronPDF handles these HTML standards automatically.
Why Does Wrapping Tables in DIVs Matter?
Wrapping tables in div elements with page break controls provides several benefits:
- Ensures the entire table moves as a unit to the next page if needed
- Prevents headers from being separated from data rows
- Allows for additional styling and spacing control
- Makes it easier to add captions or descriptions that stay with the table
What Advanced CSS3 Settings Control Page Breaks?
To give greater control, use CSS3 in addition to your thead group:
<style type="text/css">
table { page-break-inside:auto }
tr { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
</style>
Which CSS Properties Work Best for Complex Layouts?
For complex layouts, combine multiple CSS properties:
page-break-inside- Prevents elements from splittingpage-break-after- Forces a break after an elementpage-break-before- Forces a break before an elementorphansandwidows- Controls minimum lines at page breaksbreak-inside,break-after,break-before- Modern CSS3 alternatives
These properties work together to create professional-looking PDFs with proper flow and readability.
How Do I Troubleshoot Page Break Issues?
When page breaks don't work as expected:
- Verify your HTML structure is valid
- Check that styles are applied to block-level elements
- Test with simple examples first, then add complexity
- Use browser developer tools to inspect computed styles
- Consider using IronPDF's rendering options for additional control
Remember that different PDF renderers may handle page breaks slightly differently, so testing with your specific use case is important for achieving consistent results across all scenarios.
Frequently Asked Questions
How can I control page breaks when converting HTML to PDF using IronPDF?
You can control page breaks by applying CSS properties like page-break-after: always; to specific HTML elements. This instructs IronPDF to insert a page break after the designated element, ensuring proper pagination in the converted PDF.
What is the best way to avoid page breaks within images when using IronPDF?
To prevent page breaks within images, wrap the image in a div with the CSS style page-break-inside: avoid;. This tells IronPDF to keep the image intact on the same page.
Why should I use `page-break-after` instead of other methods for adding page breaks in IronPDF?
Page-break-after generally provides more consistent results across different rendering engines compared to alternatives like page-break-before. It ensures predictable pagination when using IronPDF for complex document layouts.
Can IronPDF handle complex table structures when converting HTML to PDF?
Yes, IronPDF can handle complex table structures. It's recommended to use a <thead> element for table headers, which ensures the headers repeat on each page when a table spans multiple pages in the resulting PDF.
How do I implement page breaks in C# code when using IronPDF?
In your C# code, you can utilize IronPdf's ChromePdfRenderer to render HTML as PDF. Apply styles such as page-break-after: always; to HTML elements to control pagination.
What CSS properties work best for controlling page breaks in PDFs with complex layouts?
For complex layouts, using a combination of CSS properties like page-break-inside, page-break-after, orphans, widows, and break-inside helps create professional PDFs with optimized flow and readability using IronPDF.
How can I ensure tables do not break across pages when creating PDFs with IronPDF?
Wrap the table in a div with page-break-inside: avoid;. This approach ensures the entire table is kept together as a unit, preventing headers from separating from data rows in IronPDF-generated PDFs.
Why is it important to wrap images and tables in a `div` element when using page breaks?
Wrapping images and tables in a div element ensures that page break properties are applied to the entire block, providing better control over their pagination in the resulting PDFs produced by IronPDF.
What are common issues with image page breaks in PDFs and how can IronPDF help?
Common issues include images splitting across pages or losing associated text. Using IronPDF, you can prevent these problems by applying page-break-inside: avoid to the image wrapper, ensuring they appear as intended.
How do advanced CSS3 settings enhance page break control in IronPDF?
Advanced CSS3 settings, such as orphans, widows, and break-inside, give greater rule-based control over pagination. When combined with IronPDF's features, they help produce well-structured PDF documents.
Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.