How to Fix This Print Layout with Float (In Print Stylesheet)

Div tags with float left not printing properly

I've completely recreated your markup, so I can work with it.

this is the result. (notice how beautiful this is?)

I've tested it in IE10, IE9, IE8, FF, Chrome.
also, printed from each one, and it works like a charm.

If you have to write your HTML & CSS combined (I don't see a reason for that.. but who am I to judge) I will try to help you apply my solution to your HTML.

So, the main Idea is to lose the float thing altogether, and use inline-block instead.

but, inline-block adds extra-spacing to the elements (caused by new-lines in the markup), causing 50% to be a little more than that, therefor making the columns not to fit in one row.
I've used one of many tricks to resolved that issue. by applying font-size:0; on the container, and reapplying font size on his children.
also, I had to verticaly-align:top; the columns.

so, to summarize, this is the end result.

New HTML markup

<div class="Container">
<div class="Column">
<span class="Header">Provider:</span>
<span>Name here</span>
</div>
<div class="Column">
<span class="Header">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div class="Container">
<div class="Column">
<span class="Header">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div class="Column">
<span class="Header">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div class="Container">
<span class="Header">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>

New CSS

*
{
margin: 0;
padding: 0;
}
.Container
{
margin-bottom: 5px;
border-top: 1px solid #000000;
font-size: 0;
}
.Container *
{
font-size: medium;
}
.Container .Column
{
display: inline-block;
width: 50%;
vertical-align: top;
}
.Container .Header
{
font-weight: bold;
}

Edit:
for some reason, I've dropped your padding. so here is a fiddle with padding in the container (all the rest is the same as before)

Edit 2 inline-style

<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;font-size: 0;">
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div>
<div style="display: inline-block;width: 50%;vertical-align: top;font-size: medium;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>

Inline-Style V2

so, its probably the font fix that doesn't work for you. It's hard for me to debug, because it's working fine for me. so lets try another approach.
this time, we will eliminate the spacing between columns by deleting the new line from the markup. try this new markup.

<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Provider:</span>
<span>Name here</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Location:</span>
<span>Name</span>
<br/>
<span>Street Address</span>
<br/>
<span>City, State Zip</span>
<br/>
<span>Phone</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Appointments:</span>
<br/>
<span>No appointments scheduled</span>
</div><div style="display: inline-block;width: 50%;vertical-align: top;">
<span style="font-weight: bold;">Care Team:</span>
<br/>
<span>Name Here</span>
</div>
</div>
<div style="margin-bottom: 5px;padding: 5px;border-top: 1px solid #000000;">
<span style="font-weight: bold;">Referrals:</span>
<br/>
<span>No referrals available</span>
</div>

HTML/CSS Print Layout issue - adding extra page on chrome

Most of your problems have been caused by inefficient usage of margins, padding and borders. I solved this problem by first stripping away the irrelevant code by removing class definitions that were never called upon and removing lines that I knew or suspected were not influential, test running the new code after each removal to ensure no difference was made to the performance of the page.

My next step was to add the following CSS code to the beginning of the CSS component...

*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}

By default borders are not included in the defined dimensions of an area and are instead added to the outside of the area. By using box-sizing : border-box; at the highest level you force each area's borders to be included within it's area.

The default behaviour of margins and padding can also be a cause of much hidden grief. By setting them to 0 at the highest level you can then afford to ignore them until such time as you know they are going to be needed for a specific class or id definition, at which point you would define them as per normal.

Next, I changed the line -

margin: 1cm auto;

to -

margin : auto;

As your file is currently coded this has the effect of making it appear as if large amounts of padding surround the A4 sheet which can look fine on-screen, but it is still included in the printed area which can cause poor layout when printing. There are a few ways of getting around this problem. I would suggest regarding a-page as the A4 area and adding within that div a second div such as a-page-text-area wherein would be placed the actual text. For now I am using margin : auto; to keep the page centred horizontally and using buffer regions to separate the pages vertically.

Finally, with the class definitions ul.grid-container .container and ul.grid-container you are relying on one definition to overwrite the properties of another. In more complex programs this can lead to errors occuring in some circumstances. As a matter of good practice I recommend placing all shared property definitions within a common class or classes and all peculiar property definitions in an id. Please note that when opening a div code such as class = "container-grid container-all" can be used to apply the attributes of more than one class to that div.

The complete code that I used to fix your problem follows...

<!DOCTYPE html>

<html>
<head>
<meta charset = "utf-8">

<meta name = "viewport"
content = "width=device-width, initial-scale=1.0"
>

<style type = "text/css">
*
{
box-sizing : border-box;
margin : 0;
padding : 0;
}

@media print
{
@page
{
size : A4 portrait;
}

.a-page
{
float : left;
page-break-inside : avoid;
}

body
{
background : #fff!important;
}
}

body
{
background : rgb( 204, 204, 204 );
}

.a-page
{
background : white;
display : block;
height : 29.7cm;
margin : auto;
width : 21cm;
}

.buffer-region
{
min-height : 20px;
}

.container
{
border : 1px dashed black;
width : 50%;
}

.fc_sm
{
font-size : 1em;
left : 50%;
margin : 0;
position : absolute;
top : 50%;
transform : translate(-50%, -50%);
}

.grid-container
{
list-style-type : none;
width : 100%;
}

.grid-container .container
{
float : left;
height : 100%;
position : relative;
}

.size_4x2 li
{
height : 7.4cm;
}
</style>
</head>

<body class = "size_4x2">
<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>

<div class = "buffer-region">
</div>

<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>

<div class = "buffer-region">
</div>

<div class = "a-page">
<ul class = "grid-container">
<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>

<li>
<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>

<div class = "container">
<p class = "fc_sm"><span>test</span></p>
</div>
</li>
</ul>
</div>
</body>
</html>

If you have any questions or comments, then please feel free to ask / make them.

HTML/CSS printing page-break with float not working (eg: bootstrap)

Firstly, page-break doesn't work inside absolutely positioned elements so make sure your page-break isn't inside one.

Now, since float is causing the page-break to be ignored, we need to clear the float.

The problem is that clear: both; doesn't work if the element with page-break-after: always; is a float (eg: .col-xs-12 in bootstrap).

The trick is to add 2 new divs with the clear and page-break after the div you want to add the page-break to:

<div class="page-break-clear"></div>
<div class="page-break"> </div>

<style type="text/css">
.page-break-clear {
clear: both;
}
.page-break {
page-break-after: always; /* depreciating, use break-after */
break-after: page;
height: 0px;
display: block!important;
}
</style>

Putting it together:

<div style="float:right;">floating div</div>

<div class="col-xs-12">
<div class="row">
<div class="col-xs-12 break-after">
Add page break after this element when printing
</div>
<!-- These 2 new added divs will clear float and add the page break -->
<div class="page-break-clear"></div>
<div class="page-break"> </div>

<div class="col-xs-12">
This should be printed on next page
</div>
</div>
</div>

<style type="text/css">
.page-break-clear {
clear: both;
}
.page-break {
page-break-after: always; /* depreciating, use break-after */
break-after: page;
height: 0px;
display: block!important;
}
</style>

as a side-note: I recommend removing the page-break-after css for .break-after class that was supplied in the question to prevent doubling up on page-breaks incase the floats are removed and it actually works.

Also, to make your life easier if you are using jquery and don't want to manually add those 2 page-break divs, just run the following code which will automatically add them after all elements with the class .break-after:

$('.break-after').after('<div class="page-break-clear"></div><div class="page-break"> </div>');


Related Topics



Leave a reply



Submit