S'affranchir des tableaux HTML avec CSS2

Un exemple de positionnement d'éléments CSS2 permettant de concevoir une mise en page au pixel près sans l'utilisation de tableaux HTML. Il est possible de sélectionner un autre fichier CSS2 en cliquant ici.

Voici le fichier css correspondant à la mise en page que vous observez actuellement:

body {
	margin:0px;
	font-family:verdana, arial, helvetica, sans-serif;
	background-color:#FFFFFF;
	}
h1 {
	margin:0px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:12pt;
	font-weight:900;
	color:#000000;
	}
p {
	margin:0px 5px 0px 5px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size:9pt;
	text-align:justify;
	color:#333333
    }

pre {
	margin:20px 20px 20px 20px;
	font-family: courier new, courier, mono;
	font-size:9pt;
	color:#006600
    }

a {
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:9pt;
	font-weight:600;
	text-decoration:none;
	}
a:link {color:#000066;}
a:hover {color:#990000;}
a:visited {color:#660000;}

#header {
	margin:5px 0px 0px 0px;
	padding:5px;
	border-style:solid;
	border-color:black;
	border-width:1px 0px;
	background-color:#AAAFFF;
	font-family:verdana, arial, helvetica, sans-serif;
	font-size:16pt;
	font-weight:900;
	color:#FFFFFF;
	}

#corps {
	margin:10px 5px 5px 200px;
	padding:2px;
	border:1px dashed #999;
	}

#colgauche {
	position:absolute;
	top:50px;
	left:10px;
	width:180px;
	padding:5px;
	background-color:#DDDEEE;
	}