Printing web pages that use

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View

Forgive me if this is a stupid question.  I have a course syllabus
located at .

I use a <div> container for the main content of the page.  When I print
the page, or select Print Preview, I get only a single sheet, even the
though the content should run to three sheets of paper.  In Print
Preview, the content simply runs off the bottom of the window, while
the browser tells me that I have only one page to print.

I've tested this using IE-7 beta 2 (version 7.0.5346) and Firefox  I get the same result for both.  Obviously, I don't
understand something about how the div container works.  Can anyone
help me with this?  I have a link to an MS-Word version of the
syllabus, so my students can print the syllabus if they need to, but
this just bothers me.  What mistake am I making?

Rodney Dunning
Assistant Professor of Physics
Longwood University

Re: Printing web pages that use

Rodney Dunning wrote:

Quoted text here. Click to load it

The CSS contains this
    overflow: auto;

That's a bit of a blunt thing to apply to _every_ div, including your
<div class="content" >

On screen, the browser might decide to put scrollbars on the content
div if it doesn't fit into the available container space. Yours is OK,
because the page can just expand to fit it.  When printing though (and
this is very browser dependent) it's likely to see the container as
related to physical page, obviously it can't scroll a printer, so the
only alternative is chop it.

Your HTML looks fine - this is certainly a valid use of <div>

In the short term I suggest adding this to the CSS
    div.content { overflow: visible; }

In a longer term, investigate what the     overflow: auto; was originally
needed for, get rid of it if you can, or at least qualify it with an
appropriate class selector.

Re: Printing web pages that use

Quoted text here. Click to load it

In your CSS file, take out position:absolute; from the body style,
and overflow: auto; from the content style.  That makes it print as
expected, and doesn't (noticeably) affect the appearance in FF

(Now I will have to go re-read the CSS spec to figure out why that
combination of things does what it does!)

Site Timeline