http://www.apprendre-joomla.com/tuto-demo/css/tuto-float-corrige.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type= "text/css">
body {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 12px;
text-align: center;
}
div{
margin: 4px;
border: 1px solid blue;
}
#conteneur {
width:970px;
border: 1px solid red;
margin: 0 auto;
}
#enhaut {
width:960px;
height:100px;
}
#gauche {
float:left;
width:200px;
height:300px;
}
#centre {
float:left;
width:518px;
height:300px;
}
#droit {
float:left;
width:200px;
height:300px;
}
#enbas {
clear:both;
width:960px;
height:33px;
margin: 4px auto; /* pour centrer le bas page */
}
.clr {
clear: both;
font-size:0;
line-height:0;
border: 0px;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="enhaut">ENHAUT</div>
<div id="recherche">RECHERCHE</div>
<div id="contenu">
<div id="gauche">GAUCHE</div>
<div id="centre">CENTRE</div>
<div id="droit">DROIT</div>
<div class="clr"></div>
</div>
</div>
<div id="enbas">ENBAS</div>
</body>
</html>
Center un bloc dans un autre
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type= "text/css">
body {
font-family: Tahoma, Arial, Verdana, sans-serif;
font-size: 20px; /* taille de police */
text-align: center; /* texte centré */
color: blue; /* texte de couleur bleue */
}
#conteneur {
width:960px;
min-height:300px; /* hauteur minimale */
background-color:#A9A9A9; /* fond coloré */
border-top: 1px solid transparent; /* La bordure choisie est de couleur transparente */
}
#contenu {
margin: 100px auto; /* bloc centré avec une marge en haut et en bas de 100 pixels */
width:300px;
height:100px;
background-color:#98FB98;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="contenu">Contenu</div>
</div>
</body>
</html>
Articles
