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;
Search WWH ::

Custom Search