Hi,
I designed a page with CSS which has the following sections:
Also I have another CSS file for the print of the page, where it hides the following sections:
It works great, BUT the problem is that their positions kept in place, it means the content is on its prior position and not move up and left.
What is the clue ?
This is a common print-stylesheet gotcha. As pointed out, the space remained because the elements were only being hidden in a way that preserved their layout boxes; switching to a rule that removes them from the document flow lets the main content reflow and fill the gap, which is why saw the problem disappear.
A few things to watch for beyond the basic hide/remove rule: parent containers with fixed heights will keep their spacing unless you let them auto-size for print; floats and non-cleared floats can keep a parent tall; absolutely or fixed positioned elements do not cause siblings to reflow the same way as normal flow boxes; and margins/padding on adjacent elements can look like leftover space. Also remember that browsers add print margins and optional headers/footers in preview, which can affect visible layout.
Quick checklist for reliable print output: put print-only rules in a dedicated print stylesheet or a print media query; remove elements in a way that collapses their layout boxes; reset floats, fixed heights, and absolute positioning as needed for print; test in multiple browsers and use devtools to emulate print media when possible. For reference on how browsers treat these properties and print media, see the MDN docs on display, visibility, and @media: display on MDN, visibility on MDN, @media on MDN.
Jump to Post— almostbob 866change display:hidden; to display:none;
change display:hidden; to display:none;
Thanks :-) Working great.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.