How to keep child divs from expanding beyond the parent when printing

Question

I am trying to format an html page as a court pleading which needs to print neatly on an 8.5 x 11 piece of paper. I have it looking to spec as an HTML, but when I go to print, the Container holding the contents expands beyond the body.

I have tried setting a specific width to the container to match the body, but that has not worked.

I created a fiddle with both the HTML and CSS:

See fiddle here

Here is the CSS for the BODY and CONTAINER:

body {
    width: 8.5in;
    height: 11in;
    padding-left: 1.5in;
    padding-right: .5in;
    margin: 0;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.container {
    border-left: 2px solid black;
    border-right: 2px solid black;
    width: 8.5in;
    margin: 0;
    padding: 5px;
    height: 100%;
}

If you click on the "Open print preview" text at the bottom of the result, and then attempt to print, you can see how the document changes in the print preview window in Chrome.

This application is meant to work in Chrome specifically. I am trying to produce a document that looks similar to the following, with the grey thinner lines indicating the edge of the page:

Answer 1

I'm not sure this is the solution which you are looking for. I tested your code in different browser's print preview functionality and found different result. Then I stick with google chrome and coded accordingly.

I found you used same code twice so it was not working properly! I put the other code for screen only. and change the following code for print

 @media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }

    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 100%;
        margin: 0;
        padding: 5px;
        height: 100%;
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
        padding-left: 1.5in;
        padding-right: .5in;
    }
}

In my code I removed the textarea, instead I put a <p> tag with editable capability. Please review the code and let me know your opinion.

And this is what I have here in Google Chrome.

---

I tried several option but not found any proper one! But this one is tricky! Just used the following code for print CSS. Please replace and test this code.

@media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        padding-left: 1.5in;
        padding-right: .5in;
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }
    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 6.5in;
        margin: 0 auto;
        padding: 10pt 36pt;
        /* height: 100%; */
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
    }
}

After that I used the custom margin in google chrome (Though I have not printed it! So you better test it for final output).

Hopefully this will satisfy your need! :)