Section not showing on print preview?

Question

This is probably something simple, but the Skills section on a site I'm working on for a friend (BrianCipoletta.com) isn't displaying on print preview.

The Skills section shows up fine there, but when you click Print up top or print preview, you can just barely make out (and select the top row), but nothing else shows. I've went into the print.css and I'm still at a loss.

If anyone has a minute to take a look it would be greatly appreciated, thank you! The css files are...

http://www.briancipoletta.com/css/style.css

http://www.briancipoletta.com/css/print.css

Answer 1

In your main document, give your .container element for the Skills section a unique id:

<div id="skillsContainer" class="container">

Then in your print CSS, add the following rule:

#skillsContainer {
  height: 200px;
}

The reason Skills wasn't showing up was because in the print view, all its children were absolutely positioned, so its height defaulted to zero.

You may also want to tweak the CSS for your column-left , column-right , and column-center classes as well, as in the print view they are a bit taller (at 500px) than they need to be.