28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Après avoir tourné et retourné le problème dans tous les sens je me décide à poster mon problème.

Je souhaite aligner un certain nombre de blocs (#div) dans un container (section) avec un alignement horizontale (display:inline-block;). Cependant mes différents blocs n'ont pas le même contenu et de ce fait l'alignement n'est pas parfait malgré les dispositions que j'ai prises:

- (overflow:hidden;) et une protection contre les white-spaces (overflow: hidden;white-space: nowrap;) sur les blocs (div.fi_block) et white-space:normal; sur le texte.

Je souhaite savoir quelle est la meilleure façon d'aligner parfaitement des blocs avec un contenu différent avec les éléments alignés de manière précise dans le bloc lui même sans boulverser l'alignement. Le tout de manière compatible avec les navigateurs les plus récents.

Source pour débugger mon code (extrait de code) :
http://cdpn.io/oiyzB

original (compatible avec firefox mais problème d'alignement avec chrome):
*removed*

Notes: J'utilise le framework bootstrap avec font-awesome pour l'affichage d'icones sur les balises <i></i>. Mon projet n'a aucune vocation commerciale et est uniquement destiné à me faire progresser en php (récupération des cours du CAC40 avec insertion dans une BDD) et le front-end.

Je vous remercie pour votre aide, toutes les remarques sont bienvenus Smiley smile .
Modifié par pete (23 Aug 2013 - 15:47)
Salut,

A la place de ton display:inline-block met un float:left;

Ensuite tu places un clear:both; pour le footer.

Et tu ajustes la margin pour éviter que le footer colle au bloc qui float Smiley cligne
(Applique un overflow:hidden + padding:5px a la <section>)
Modifié par artsx (23 Aug 2013 - 14:32)