En rajoutant la proprièté clear au style dans la balise div, le conteneur div s'étire alors en englobant les deux bloc p#premier et p#second

Codage CSS de l'exemple:

/* corps de page de couleur bleue */
body {
background-color: #297cbc;
}

/* bloc div de couleur jaune */
div#conteneur {
width: 300px;
background: yellow;
}

/* bloc paragraphe de couleur orange la propiété float a été appliquée */
p#premier {
float: left;
width: 100px;
background: orange;
}

/* bloc paragraphe de couleur verte la propiété float a été appliquée */
p#second {
float: left;
width: 150px;
background: green;
}

/* marges de paragraphe à 0 pour structurer les blocs */
#conteneur p {
margin : 0;
}

/* en ajoutant une separation hr avec la propriété clear cela interdit tout flottant
.separation {
clear: both;
visibility: hidden;
}

Code HTML pour afficher le style CSS

<html>
< head>
< style type="text/css"> @import url(style/background.css);</style>
< /head>
< body>
<div id="conteneur">
< p id="premier">premier paragraphe de texte</p>
< p id="second">deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de texte deuxième paragraphe de textedeuxième paragraphe de texte</p>
< hr class="separation" />
< /div>
< /body>
< /html>