HTML and CSS Reference
In-Depth Information
Figure 16-4.
IE 9 leaves a space when a floated image is moved to the next page
14. Because you can't predict the page size that will be used for printing, it's not
practicable to compensate for this sort of problem. Adding a style to the
figure
class to set
page-break-before
to
always
forces a break in some browsers, but
not in IE 9. For this particular page, the least disruptive solution is to create a style
rule for the
aside <div>
to force a page break after the sidebar content like this:
#aside {
page-break-after: always;
}
15. Forcing the page break after the sidebar moves the beginning of the main
content to a page of its own. So, it would be a good idea to give it a heading. In
modern browsers that support generated content, nothing could be easier. Use
the
::before
pseudo-element like this (notice that you need to set the
display
property to
block
to center the generated content):
#main::before {
content: 'Mediterranean Destinations';
font-weight: bold;
font-size: 18pt;
margin-bottom: 12pt;
display: block;
text-align: center;
}
16. It's also a good idea to add the
clear
property to the style rule for the
subheadings because they frequently appear close to floated images:
h2, h3 {
margin-bottom: 0.25em;
