Estoy intentando que esta función funcione en el sitio web de un proyecto en el que estoy trabajando. El propósito de esta función es imprimir solo (físicamente) el contenido de un div hijo que, por casualidad, se denomina selector #content.

Aquí está lo poco que tengo hasta ahora:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

La función se activa cuando una persona hace clic en un hipervínculo de "impresión". La nueva ventana cargará el contenido del #content div que se analiza desde otro documento HTML:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

Simplemente no cargará el estilo junto con él. Todos los contenidos se recortarán en la esquina superior izquierda. He intentado vincular el CSS a través de JS o simplemente colocándolo en el encabezado de la página como se sugiere en otra página. Podría estar haciendo esto mal, por supuesto. Todavía no he intentado resolver esto con JQuery, así que si tiene alguna otra solución que pueda ayudarme con mi problema, estoy feliz y abierto a recibir algunos consejos sobre ellos.

¡Gracias por adelantado!