Div ajusté au contenu...

Bonjour tout le monde !

Je suis en train de refaire mon portfolio avec wordpress.
J'ai créé une mosaïque de div avec la propriété float et je souhaiterai encadrer au dessus et en dessous de cette mosaïque par des traits. le problème c'est que ces traits dépassent quand les div n'ont pas la place pour rester sur une ligne.

en fait, je positionne mes div à coups de float: right et je mets un border sur le conteneur, lorsque les div ont la place de tenir il n'y a aucun soucis :
http://img831.imageshack.us/img831/8139/sanstitre1qd.jpg

par contre lorsqu'il n'y a pas la place et que certaines vont à la ligne, le conteneur prend toute la place qu'il peut :
http://img521.imageshack.us/img521/3156/sanstitre12n.jpg

le but etant que le trait rouge (sur les images ci-dessus) soit tout le temps aussi long que le nombre de div sur la ligne.

Si vous aviez quelques pistes pour m'aider...
Modifié par vivien94 (30 Dec 2011 - 09:17)

Ne serait-ce pas possible de régler ce problème en créant un conteneur intermédiaire ?

- div
- div : float : right; border-top : /*ta bordure*/
- la liste de tes divs

Peut-être même peut-on se passer de la première div. C'est à voir comment tu veux insérer ton composant.

On peut même sûrement s'en débarrasser en mettant un
clear : right;
au composant qui suit.
Modifié par Gothor (30 Dec 2011 - 09:58)

à priori ça ne change rien...

.conteneur { border-top:#F00 solid 2px; float:right; }

.post{ height:100px; width:100px; background-color:#000; float:right; margin: 10px;}

Bonjour,

Merci pour les "up" à la chaine... À éviter à l'avenir si tu ne veux pas prendre un coup de pelle.

Pour ton problème, 3 solutions :
* s'assurer que la largeur de la div conteneur soit égale à la somme des div qu'elle contient (+marges), que ce soit en la calculant via JS ou en la fixant (et donc celle des enfant également)

* Utiliser les display table et table-cell. Ne sera pas supporté par toutes les version d'IE.

* Utiliser un tableau.
Modifié par Laurie-Anne (30 Dec 2011 - 13:56)

Désolé pour les up et merci pour ton aide.

Sachant que mes div sont affichés avec le loop wordpress et que je voudrais garder une largeur qui s'adapte à la fenêtre de navigateur je vais essayer avec du js et avec les tables.

1°/Etant complètement ignare en js (mais à l'aise as3 c'est assez proche non?), il faut que je test la largeur de mon conteneur, à partir de là je devrais en déduire le nombre de bloc par ligne et donc agrandir la bordure en fonction du nombre de div, j'ai juste?

2°/ pour les tables, ben je vais essayer, mais vu que tout est dynamique et variable je vais surement devoir tout mette dans une cellule.

j'ai testé avec un tableau, avec display:table et table-cell ( mais en gardant le float à l'interieur pour ne pas fixer la largeur) et ça ne règle pas mon probleme. Je vais me pencher sur le js...

n'ayant que peu d'affinité avec le js, je vais à priori me diriger vers du CSS conditionnel à la largeur de ma page (du type @media (max-width: xx px;))