Pour garder une liberté de positionnement, les blocs positionnables reposent sur un principe de double bloc, et sont composés d'un bloc externe (ex : id="content") et d'un bloc interne (ex : id="content_inner"). A l'affichage, ces deux blocs sont confondus en un seul (bloc de couleur rose ici). Attention à ne pas oublier la position:relative dans tous les blocs. Pour éviter des décalages de dimensions dans Firefox, les valeurs margin et padding du bloc externe doivent uniquement servir au positionnement. La marge nécessaire au contenu sera fixée par le padding du bloc interne.
A l'intérieur de ce double bloc, on pourra placer les composants souhaités (texte, image, ...). Ces composants seront eux-mêmes contenus dans des blocs pour faciliter leur positionnement. Ces blocs pourront avoir un margin non nul à la condition que le padding du bloc interne ne soit pas nul. Attention, si le padding du bloc interne est nul et le margin des composants non nul, alors la marge débordera du double bloc. Dans notre exemple, les blocs de texte sont encadrés en noir.
Dans notre exemple, le bloc id="container" (que l'on peut voir en rouge grâce à son padding:2px) est aussi un double bloc. La nécessité de gérer des doubles blocs existe si l'on veut positionner facilement des blocs les uns par rapport aux autres, mais également pour ne pas perturber les tailles des éléments internes avec les marges de bloc. Le bloc externe contient les paramètres de positionnement, et le bloc interne les paramètres de présentation du contenu (marges).