Positionnement de bloc - Différence entre IE et Firefox

Je pose les bases. Voici le code :

<span class="col2">
	<div class=box>Boite 1</div>
</span>

<span class="col2">
	<div class=box>Boite 2</div>
</span>


<div class="box">		
	Boite bas
</div>

Ceci est censé afficher 2 boites cote à cote de même taille avec un contenu (des fonctions php sans importance que j'ai remplacé par du texte).

Voici les styles correspondants :
.col2 { float:left; clear: right; width: 49.9%; vertical-align: top; margin:0; padding: 0; }

.box
{
position: relative;
background: url(pic/interface/parchemin.jpg) top left repeat;
border: 1px solid #660000;
margin: 10px 10px 0 0;
padding: 5px;
}

Le problème est l'énorme différence de résultat entre IE et Firefox...

Sous IE les boites 1 et 2 sont l'une à coté de l'autre
Sous Firefox les boites 1 et 2 sont l'une au dessus de l'autre

Auriez vous une idée du pourquoi ?
Une solution car je parcours de très nombreuses pages depuis 2 jours et je vois pas ?


NB : mettre les boites 1 et 2 en float avec le paramètres float:left et clear:right fonctionne sous Firefox mais pas sous IE... juste au cas où vous me proposiez cette solution...


Merci d'avance

Je ne vois pas l'utilité du clear: right;
quelle est la largeur de .box?
je ne sais pas si c'est judicieux de mettre un div dans un span.
vertical-align; = inutile ne fonctionne que sur FF et avec propriete
display: table-cell;
Modifié par jp94 (24 May 2006 - 15:05)

Hello et bienvenue ici

Avant de s'occuper de ton problème, tu as un problème de structure en amont à régler : un élément de type en-ligne (<span>) ne peut pas contenir d'éléments de type bloc (<div>).

A partir de structures correctes et validées, il est toujours plus simple de corriger les problèmes.

Pour le clear:right, c'est dans la seconde solution où j'ai mis des div partout et où je suis passé sur des blocs flotants.

.box n'a pas de largueur.
En mettant une largueur à 100%, ca fonctionne sous IE mais pas sous Firefox (même problématique que si je ne mets pas de largueur).

Si un div dans un span n'est pas la bonne solution, je suis preneur d'une autre solution...
En fait je cherche à faire la chose suivante :
- 2 colonnes de taille identiques cote à cote avec un contenu qui va etre désolidarisé (donc pas d'alignement gauche-droite)

Comment faire sinon par ce moyen ?

NB : je sais, je suis une quiche...
Modifié par moorf (24 May 2006 - 15:11)

L'imbrication n'est pas bonne.
La balise span peut accepter toutes celles-ci comme enfant :

a écrit :
#PCDATA
- a - abbr - acronym - b - bdo - big - br - button - cite - code - del- dfn - m - i - img - input - ins - kbd - label - map - object - q - samp - script - select - small - span - strong - sub - sup - textarea - tt - var

mais pas de DIV.

Un excellent site à consulter pour connaître les parents et enfants potentiels de chaques balises : http://giminik.developpez.com/xhtml

Edit - Zut, double barbecue pendant que je cherchais mon lien...

a écrit :
2 colonnes de taille identiques(...)

Comment faire des "colonnes" de même hauteur ?
Modifié par (24 May 2006 - 15:15)

Je me suis mal exprimé... je cherche à faire des colonnes un peu comme dans les colonnes d'un journal, c'est à dire qu'une succession d'articles dans chaque colonne qui ne sera pas aligné par rapport aux articles de l'autre colonne.

Auriez vous une méthode ?

utilisation des floattant c'est tres bien mais div etant bloc conteneur span etant inline mettre div flottants et le contenu avec les balise html classiques et au besoin span mais pas div dans span .
Ce matin je viens de coder cette page , il y a 5 div flottants cote a cote, le contenu c'est h3 ul et p. lapage
Modifié par jp94 (24 May 2006 - 15:36)

Je précise que lorsque j'ai mis les blocs en float, j'ai "transformé" les span en div... ca me faisait des div dans des div. Le soucis se posait alors sous IE...

avec IE les largeurs sont trop grandes etant donné qu'il ajoute des marges impossible a supprimer don diminue la largeur des div pour IE

j'ai bien regardé le code le la page bencomputer, ca ne correspond pas trop à ce que je veux faire.

j'ai un soucis majeur : je ne travaille pas en largeur fixe
je fais donc des blocs "colonne" (col2 dans mon exemple) qui sont d'une largeur de 49.9% et dedans je mets des choses... mais ca marche pas de la meme facon sous IE et firefox et c'est là mon gros soucis... d'où une demande d'idée

ca marche de la meme facon sauf qu'IE rajoute des marges et donc si tu veux travailler en fluid fais 2 reglres dufferentes une pour bloc gauche et une pour bloc droit. tu definis la largeur de gauche + float:left;.Pour droit tu mets margin-left equivalent a largeur de gauche sans preciser de largeur et pas de float

je viens de regarder le source de http://lifetype.interne.emgsgroup.com/summary.php?op=Planning
maintenant ca fonctionne sous ie mais pas firefox... fais ****

voici l'adresse pour visu du test adresse de test : sbarbay.free.fr/test/

tu veux blocs qui prennent la moitie de la page chacun ? je te le fais en 5 minutes tu prendras les codes dans la source

j'ai mis l'exemple en ligne
si tu as IE tu verras le resultat souhaité
si tu as firefox tu verras la merdasse...

en fait j'ai regardé les sources du forum et c'est des tableaux !!!
alors la question c'est DIV ou TABLE ???
en fin de compte sur les différents sites que je parcours je vois un peu des deux...

j'ai vu du full-div (div dans div dans div dans div dans div dans div...) et aussi des tables (généré très certainement par du php mais des tableaux quand meme)

alors : ???
que faire ?

si tu peux me montrer un truc qui fonctionne à tous les coups : je suis preneur !!!
Modifié par moorf (24 May 2006 - 17:11)

voila 2 colonnes cote a cote et tu mets ce que tu veux dedans
ici.
ce soir desolé je dois partir mais si tu veux demain ou plus tard on reprendra plus en details.
bon dev a +
Modifié par jp94 (24 May 2006 - 17:27)

Merci bien pour ton aide... en fait c'est pas vraiment ca que je souhaitais car mes colonnes sont "mouventes".
Comprendre que je me sers du php pour connaitre le nombre de colonne.
En fait je passe un chiffre (2 dans le cas présent) et ca me divise 99 par ce chiffre pour fixer le nombre de colonne.
Ca me permet d'avoir 1 style pour x colonne.
Par exemple je fais un style col3 pour faire 3 colonne de 33% de large.
Je vais faire des tests complémentaires.
Note que tu as un exemple de ce que je veux faire là : http://sbarbay.free.fr/test/

Merci encore

a écrit :
ca marche de la meme facon sauf qu'IE rajoute des marges et donc si tu veux travailler en fluid fais 2 reglres dufferentes une pour bloc gauche et une pour bloc droit. tu definis la largeur de gauche + float:left;.Pour droit tu mets margin-left equivalent a largeur de gauche sans preciser de largeur et pas de float

IE : bogue des marges doubles avec flottants

(En raccourci, il suffit de rajouter display: inline; pour avoir une marge normale.)

J'ai fais d'autres essais.
J'ai 2 soucis :
- sous IE pour le centrage du titre (mais je crois avoir vu une solution à ce pb qqpart, c'est au sujet de la prise en charge des marges auto)
- sous firefox, il n'y a pas de gestion de la marge de la boite bas

lien : http://sbarbay.free.fr/test/
Modifié par moorf (24 May 2006 - 18:52)

Pour jp74

jp94 a écrit :

Ce matin je viens de coder cette page , il y a 5 div flottants cote a cote, le contenu c'est h3 ul et p. lapage

1 Go
* Comptes POP illimités
* Bases MySQL illimités
* Comptes FTP illimités
* PHP: 4 et 5
* Trafic mois illimité
* + Nom de domaine

pour 2 € par mois JE PREND de Suite

A+
Modifié par gege71 (25 May 2006 - 00:07)

il va bientot inaugurer, note l'adresse " bchosting " , faudra etre dans les 1ers , il limite le nombre d'heberements pour le moment.