SpotGnome.com
Spot the web RSS 2.0
# Saturday, January 05, 2008
Advanced CSS Printing — Using CSS Page Breaks

There are numerous spots that are good for page breaks made especially for printing:

  • Between page sections (h2 or h3 tags, depending on your site format)
  • Between the end of an article and subsequent comments / trackbacks
  • Between longs blocks of content


Luckily, using page breaks in CSS is quite easy.

The CSS Code

  1. @media all  
  2. {   
  3.     .page-break { display:none; }   
  4. }   
  5.   
  6. @media print  
  7. {   
  8.     .page-break { display:block; page-break-before:always; }   
  9. }  

The XHTML Code

  1. <DIV class=page-break></DIV>  

The Usage

  1. <H1>Page Title</H1>  
  2. <!-- content block -->  
  3. <!-- content block -->  
  4. <DIV class=page-break></DIV>  
  5. <!-- content block -->  
  6. <!-- content block -->  
  7. <DIV class=page-break></DIV>  
  8. <!-- content block -->  
  9. <!-- content -->  

		

			
			
	

	

		
		
		
		Saturday, January 05, 2008 11:52:19 AM (Jerusalem Standard Time, UTC+02:00) 
		# 
		 
		Comments [0] - Trackback
		

		CSS | Web 2.0
		
				
		
		
	



	

		
			Comments are closed.
		
		
		
	




			

				
				
			

				
		
		
																																											
			

				
Navigation
					
				

	Home


			

			

			
			

				
Categories
				
				

					

	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	

		 
	



				

			

			

			
			

				
Archive
				
				
									
					

	

		
<July 2010>

	
SunMonTueWedThuFriSat
27282930123
45678910
11121314151617
18192021222324
25262728293031
1234567



				

			

			

								
			

				
Blogroll
				
				

					
						PageRank Checker
														
					

	

		[Feed] Achim Oellers
	

		[Feed] Bart DePetrillo
	

		[Feed] Clemens Vasters
	

		[Feed] Harry Pierson
	

		[Feed] Jörg Freiberger
	

		[Feed] Omar Shahine
	

		[Feed] Stephen Forte
	

		[Feed] Tom Mertens
	

		[Feed] Scott Hanselman
	

		[Feed] Joshua Flanagan
	



				

			

			

																
			

				
About the author/Disclaimer
				
				
Disclaimer

The opinions expressed herein are my own personal opinions and do not represent
my employer's view in any way.

					
					© Copyright 2010
 Guy Levin
														
						Sign In	
						

				

			

			

			
			

				
Statistics
				
				
									
					
Total Posts: 63
This Year: 0
This Month: 0
This Week: 0
Comments: 14

				

			

			

			
			

				
Themes
				
				
									
					
				

			




			

			
																																																																																						
										
	

	
	

		
			All Content © 2010, Guy Levin