28173 sujets

CSS et mise en forme, CSS3

Bonjour,

je dois faire une mise en page où, à l'intérieur d'une div, je dois d'abord mettre du texte, puis à la toute fin, un texte sur deux colonnes. voici une version simplifiée de la mise en page:

<html>
<style type="text/css">
div {border: 1px solid #000;}
.b,.c {float: left; width: 250px;}
</style>
</head>

<body>
<div class="a">
du texte, du contenu... et tout en bas de la page, </p>
<div class="b">
du texte qui s'aligne à gauche</p>
</div>
<div class="c">
et du texte dans une deuxième colonne.
</div>
</div>

</html>

sous firefox ou opera, la div principale ("a" dans mon exemple) s'arrête avant celle des deux divs qui flottent à gauche. donc, le contenu de ces deux divs dépasse par le bas.
ce problème n'apparaît pas sous ie qui considère que mon intention était de faire tout rentrer dans la div "a" et qui lui applique les mêmes règles que si c'était une cellule de <table>...


ma question est donc:
comment faire une <div> qui puisse s'étendre pour englober les divs qui flottent en-dessous?
une manière de contourner ce problème serait de remplacer dans mon code div par table. mais je n'ai vraiment pas envie de le faire.
merci de votre aide!!!