Cette page-ci vous permet de simuler différentes situations faisant intervenir les propriétés float, clear et position. Les encadrés vert pâle et rouge pâle contiennent respectivement du code CSS et HTML que vous pouvez modifier à votre guise. Il vous suffira ensuite de cliquer le bouton bleu situé plus bas pour visualiser ce que votre code génère. S'il ne se passe rien ou s'il se passe des choses bizarres, c'est qu'il y a des erreurs quelque-part dans les modi­fi­ca­tions que vous aurez faites. Vous pouvez réinitialiser le code n'importe quand en poussant la touche « F5 » du clavier.

Voici quelques modifications suggérées, que vous pouvez bien sûr combiner :

• Dans le code HTML, ôtez « width: 45%; » ou/et « height: 250px; » (vous pouvez laisser « style="" » si vous voulez, cela ne gêne pas);
• Voyez ce qui se passe si vous enlevez « clear: both; » plus loin dans le code (la même remarque s'applique);
• Que se passe-t-il si, à la même ligne, vous ajoutez « class="div1" » ou « class="div2" » ? Si en plus, dans « style », vous ajoutez « margin: auto; » ?
• Dans le code CSS, changez « float: right; » pour « float: left; » pour la division en bleu ciel;
• Pour la division en vert pâle, dans le code CSS, changez « position: absolute; » par « position: static; », « position: relative; » ou « position: fixed; »; à la même ligne, changez les valeurs de « right » et de « bottom », ensuite remplacez « right » par « left » et/ou « bot­tom » par « top »;
• Qu'arrive-t-il à la division en beige si vous supprimez la valeur « auto » dans la propriété « margin » ? Ou si vous lui ajoutez la déclaration « overflow: hidden; » ? Que se passe-t-il si, en plus, vous supprimez la déclaration « width: 500px; » ? Si vous baissez également la largeur de l'élément dans le coin supérieur gauche à 35% ?

Les possibilités sont infinies. Bon amusement !

Cliquez le bouton pour tester votre code. Pour réinitialiser, appuyez sur la touche « F5 ».