[css] Margins bij float: left en float: right

[cyberstalker]

Om mij onbekende redenen krijg ik bij het gebruik van float:right wisselende marges. Het is de bedoeling dat de voor- en achterkant van een pagina mooi bij elkaar passen.

Relevante CSS-code:

Cascading Stylesheet:

@page
{
    margin: 20px;
}

body
{
    font-family: "Century Gothic";
}

div.identificatie
{
    position: relative;
    border: 1px solid black;
    page-break-inside: avoid;
    float: left;
    width: 300px;
    height: 170px;
    margin: 2px;
}

Voor de achterkant is het enige verschil dat de float op right staat. Als ik het goed begrijp zou dit voldoende moeten zijn om de elementen van de voor- en achterkant mooi te laten aansluiten. Het klopt echter nooit precies. Daarnaast is de afwijking groter wanneer er meer <div class="identificatie"> op de pagina staat.

Alle elementen in de div.identificatie zijn absoluut gepositioneerd, dus het lijkt me sterk dat deze het roet in het eten gooien.

Wat doe ik hier fout?

[moozzuzz]

Voorbeeldje van een pagina zelf?

[cyberstalker]

HTML:

<div class="identificatie">
    <img src="images/id/-knip--Logo.gif" style="left: 5px; top: 5px; width: 91px; height: 82px" alt="-knip--Logo.gif" title="-knip--Logo.gif">
    <img src="images/id/-knip--Wolk.gif" style="left: 145px; top: 20px; width: 127px; height: 118px" alt="-knip--Wolk.gif" title="-knip--Wolk.gif">

    <img src="../faces/small/php1lTX8l20060721.jpg" style="border: 2px solid black; left: 210px; top: 50px; width: 66px; height: 88px" alt="Werver foto" title="Werver foto">
    <div style="left: 5px; top: 90px; width: 120px; height: 10px; text-align: left; font-size: 10px; color: black;">
        -knip-
    </div>
    <div style="left: 5px; top: 120px; width: 150px; height: 10px; text-align: left; font-size: 10px; color: black;">
        Voor info: -knip-
    </div>
    <div style="left: 5px; top: 133px; width: 150px; height: 10px; text-align: left; font-size: 10px; color: black;">
        www.-knip-.nl
    </div>

    <div style="left: 0px; top: 160px; width: 300px; height: 10px; text-align: center; font-size: 6px; color: black;">
        Dit legitimatiebewijs blijft eigendom van -knip- en moet op verzoek worden ingeleverd.
    </div>
    <div style="left: 145px; top: 10px; width: 160px; height: 15px; text-align: left; font-size: 13px; color: black;">
        Legitimatiebewijs
    </div>
    <div style="left: 145px; top: 25px; width: 160px; height: 10px; text-align: left; font-size: 8px; color: black;">
        Geldig t/m 10-10-2006
    </div>
</div>
<div class="identificatie">

    <img src="images/id/-knip--Logo.gif" style="left: 5px; top: 5px; width: 91px; height: 82px" alt="-knip--Logo.gif" title="-knip--Logo.gif">
    <img src="images/id/-knip--Wolk.gif" style="left: 145px; top: 20px; width: 127px; height: 118px" alt="-knip--Wolk.gif" title="-knip--Wolk.gif">
    <div style="left: 5px; top: 90px; width: 120px; height: 10px; text-align: left; font-size: 10px; color: black;">
        -knip-
    </div>
    <div style="left: 5px; top: 120px; width: 150px; height: 10px; text-align: left; font-size: 10px; color: black;">
        Voor info: -knip-
    </div>
    <div style="left: 5px; top: 133px; width: 150px; height: 10px; text-align: left; font-size: 10px; color: black;">
        www.-knip-.nl
    </div>

    <div style="left: 0px; top: 160px; width: 300px; height: 10px; text-align: center; font-size: 6px; color: black;">
        Dit legitimatiebewijs blijft eigendom van -knip- en moet op verzoek worden ingeleverd.
    </div>
    <div style="left: 145px; top: 10px; width: 160px; height: 15px; text-align: left; font-size: 13px; color: black;">
        Legitimatiebewijs
    </div>
    <div style="left: 145px; top: 25px; width: 160px; height: 10px; text-align: left; font-size: 8px; color: black;">
        Geldig t/m 10-10-2006
    </div>
</div>

[TeeDee]

Misschien een screenshot om het probleem te verduidelijken?

[cyberstalker]

TeeDee schreef op maandag 25 september 2006 @ 11:06:
Misschien een screenshot om het probleem te verduidelijken?

Dat heeft weinig zin naar ik vrees. Op het scherm klopt het precies. Bij afdrukken gaat het echter verkeerd. Daar zit het probleem (dat had ik er natuurlijk bij moeten zetten, sorry )

[Savantas]

En hoe nauwkeurig is de printer? Want ik heb daar vaak hele grote variaties in gezien, ook bij printers waarvan je het niet zou verwachten...

[cyberstalker]

Savantas schreef op maandag 25 september 2006 @ 13:14:
En hoe nauwkeurig is de printer? Want ik heb daar vaak hele grote variaties in gezien, ook bij printers waarvan je het niet zou verwachten...

De printer is een gloednieuwe Epson Aculaser. Waar ik mij vooral over verbaas is dat de indeling verandert wanneer er meerdere <div class="identificatie"> op de pagina staat.

[Boelie-Boelie]

En als je die floats (class="identificatie") cleart?