Centrer un groupe de div en mode float
Bonsoir,
Suite à quelques recherches, j'ai trouvé une façon de faire qui correspond presque à ce que je veux; les DIV utilisent judicieusement l'espace en adoptant le bon nombre de colonnes.
(Voir mon précédent sujet http://www.developpez.net/forums/d83...ent-efficaces/
je cherchais à obtenir cette mise en page http://electroremy.free.fr/sonorama2009/part20.html sans utiliser de javascript)
Mais je n'arrive pas à centrer l'ensemble des DIV.PIC, ce qui est très laid.
Voici les codes :
fichier html :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <HTML>
<HEAD>
<style type="text/css">
@import url(style_p.css);
</style>
<TITLE>Vidéos</TITLE>
</HEAD>
<BODY>
<div class="int">
<div class="pic">boite 1</div>
<div class="pic">boite 2</div>
<div class="pic">boite 3</div>
<div class="pic">boite 4</div>
<div class="pic">boite 5</div>
<div class="pic">boite 6</div>
<div class="pic">boite 7</div>
<div class="pic">boite 8</div>
</div>
</BODY>
</HTML> |
fichier css :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| div.pic {float: left;
width: 250px;
height: 180px;
background: #ff9933;
margin: 12px 12px 12px 12px;
padding: 6px 6px 6px 6px;
border-style: dashed;
border-width: medium;
border-color: green;
text-align: center;
vertical-align: middle;
}
div.int {margin-left: auto;
margin-right: auto;
margin-top: 4%;
margin-bottom: 4%;
text-align: center;
} |
Comment faire ? Sachant que je ne peux connaitre le width à appliquer à div.int puisque cette valeur dépend de la taille de la fenêtre du navigateur du visiteur du site.
Merci !