I'm building out a page and it looks fine in both browsers when you load it.

If you try to print this page the layout goes wonky and it looks like none of the elements are floating left as they should be.

Imagine two columns

A | B

B is going under a and it doesn't make any sense.

There is a container with the full width. Let's say 800px. A is 300, b is 300. It's cleared so it's taking up the space and both browsers know that it's there. Solid, works.

But I guess the above is mainly irrelevant. All I'm trying to convey is that the floating code is proper. Nothing inside is bigger than the container so it shouldn't push the columns to the next line.

However if you print it, it's like it thinks A is too big and pushed b under it. I don't know why. I have no print styles defined. Any ideas?

One big clue

Why is the column a (float a) BIGGER in the print preview? (it is).

normal sizes when just loading the page.

  • No one can debug a screenshot. Nathan Duran over 9 years ago
  • What would cause such a thing? I don't even know what code to offer because I don't have any "print" specific code. DFischer over 9 years ago
  • As Natthan says, its difficult to debug an image. Also it would be recommendable for you to use a print style. ErCesar about 9 years ago
  • You haven't properly cleared your floats. VagrantRadio almost 9 years ago

1 answer

Sisira 95

When you are printing certain area you need to clear properly. Suppose you want to print the content area with id "x" which have column with id "Y" and "Z". Then you should add the following CSS rule

x:after {

clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden


Second of all you can try the overflow:hidden for the columns.

But i am just guessing :). Hope this would help.

Answered over 8 years ago by Sisira