Support de cours - Lita

Ces blocs seront probablement des blocs conteneurs pour les éléments Html qu’ils
vont contenir, on change alors leur positionnement :
#header, #content, #footer {
}
position: relative;
À l’intérieur du bloc #content, nous faisons flotter le bloc #nav à gauche et définissons
la marge gauche du bloc #main pour éviter le chevauchement à la même valeur que la
largeur du bloc #nav. Ce qui donne :
#nav {
}
float: left;
width: 250px;
#main {
}
margin-left: 250px;
Le bloc #main doit aussi être un bloc conteneur :
#main {
}
position: relative;
Si le contenu du bloc #main est plus petit que celui du bloc #nav, alors le bloc #footer
risque de se placer à gauche de #nav (car #nav est flottant). Pour éviter cela, il suffit
d’empêcher le bloc #footer de se trouver à côté d’un flottant :
#footer {
}
clear: both;
Ce code Css peut être condensé en rassemblant les différentes déclarations pour
donner au final le fichier style.css suivant :
#header, #content, #footer, #main {
}
position: relative;
#header {
}
height: 150px;
#nav {
float: left;
width: 250px;
}
#main {
margin-left: 250px;
42