En fait, votre div.toc
est correctement positionné. Le problème est avec votre <iframe>
.
Rappelez-vous votre modèle de boîte ... largeur et la hauteur est calculée de façon indépendante à partir de la marge et le rembourrage ...
Alors, en ayant width: 100%;
sur votre iframe.toc
plus un margin-left: 0.5em
, vous dites essentiellement le navigateur qui suit:
Utilisez la largeur de l'élément parent et l'offset il 0.5em
vers la gauche.
Largeur totale efficace: 100% + 0.5em
Qu'est-ce que vous voulez vraiment dire est le suivant:
Soustraire 0.5em
de la largeur de l'élément parent pour utilisation en tant que rembourrage sur la gauche et l'utiliser comme largeur.
Largeur totale efficace: 100% - 0.5em (désiré)
La solution est donc simple ... Retirez le margin-left
de iframe.toc
et de mettre un padding-left: 0.5em
sur div.toc
.
div.toc {
background-color: #f0f0f0;
position: fixed;
top: 5em;
right: 0;
width: 21em;
height: 38em;
padding-left: .5em;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
z-index: 1;
}
iframe.toc {
background-color: #f0f0f0;
border: 0;
width: 100%;
height: 30em;
border-bottom: 1px solid #ccc;
}