Vous indiquez par transparence les limites de chaque bloc.
1) #Gauche { float: left; width: 23%; margin-top: 10px; } div { border: 1px solid; } #Centre { float: left; width: 48%; } #Droite { float: left; width: 18%; } | <body> <div id="Gauche"> <div id="Centre"> <div id="Droite"> </body> |
En partant du 1) et en modifiant ce qui est indiqué.
2) #Centre { float: left; width: 48%; } | 3) #Centre { float: left; width: 48%; } #Droite { float: left; width: 18%; } | 4) #Droite { background: none repeat scroll 0 0 palegreen; float: left; left: 0; padding: 10px 1%; position: absolute; width: 18%; } | 5) #Centre { background: none repeat scroll 0 0 blanchedalmond; float: left; padding: 10px 1%; position: relative; top: -313px; width: 48%; } |
Pour concevoir le menu dynamique vu en cours.
On notera chaque étape de transformation du code CSS.