[Résolu] Largeur des DIV dans Chrome et Safari

Bonjour,

Il ne me reste que quelques détails pour finaliser un site. Mais je bloque sur un problème que je ne pense pas être le premier à avoir rencontré. D'où ma question

C'est une <DIV> qui contient une <IMG> alignée à gauche (float) et une <DIV> alignée à sa droite. Sous FF et IE pas de souci, ce qui me surprend est que sur les navigateurs basés sur Webkit que la largeur du <DIV> conteneur n'est pas la même que sur FF, du coup le <DIV> qui contient le texte n'a plus assez de place et passe à la ligne...
Difficile à visualiser ? voyez l'exemple en ligne (avec Chrome ou Safari)

merci de votre aide
Modifié par miltonis (19 Aug 2010 - 13:08)

Salut,

hem... tu fais un curieux mélange des genres.

Soit tu décides d'utiliser display:table (et il faudra gérer IE < 8), soit tu utilises float mais il faut choisir.

Pour corriger ton code j'ai rajouté après tes styles :

div.colGrey img {
	display: table-cell;
	float: none;
}
div.colGrey div.colBas {
	display: table-cell;
	float: none;
	vertical-align: top;
}

Au passage ton serveur déclare un encodage en latin1 qui est prioritaire sur ta meta déclarant un encodage utf8 : pour régler ça il te faut soit un fichier .htaccess :

AddDefaultCharset UTF-8

soit rajouter au début de tes pages

<?php header('Content-type: text/html; charset=UTF-8', true); ?>

Bonjour,
Le problème s'appel le modèle en boite.
div.colGrey a un width et padding donc la largeur sera 1064+12*2.
Alors que certains navigateurs respectent la largeur déclareé qui est 1064px.
Pour résoudre ce problème tu dois

div.colGrey div {	
	padding: 8px 12px;	
}

div.colGrey va prendre auto toute la largeur
Modifié par K-2 (19 Aug 2010 - 11:15)

Salut Heyoan et K-2,

Et merci pour vos réponses, les deux cumulées, me font aboutir à un résultat correct

Concernant l'encodage, oui je savais, les paramètres de création de nouveaux documents dans mon éditeur de texte étaient mal réglés. Je vais corriger cela en recréant tous les includes.

Heyoan a écrit :
hem... tu fais un curieux mélange des genres.

Soit tu décides d'utiliser display:table (et il faudra gérer IE < 8), soit tu utilises float mais il faut choisir.

Merci pour l'info, afin de bien comprendre, je vais parcourir les pages sur ce thème
J'ai toutefois encore une question : si j'ai mis un "display:table" à div.colGrey c'est parce que sans ça, le bloc ne prend pas toute la hauteur de son contenu (IMG + DIV).

Existe-t-il un autre moyen que display:table afin de continuer à utiliser les float ?

miltonis a écrit :
Existe-t-il un autre moyen que display:table afin de continuer à utiliser les float ?

Yep : lire cette astuce.

Merci