SVP gros souci de DIV en FLOAT sous firefox Résolu

Question

Bonjour, J'ai un gros souci avec une div en float sous firefox (pas de souci pour IE). Pour être plus précis voici le code que j'ai allégé au maximum pour y voir plus clair : HTML

(bordure de la page)

(contenu à gauche de la page)

(contenu à droite de la page)

CSS #global { margin: 0 auto; } #page{ width: 800px; margin: 0 auto; height: auto; margin-bottom: 30px; } #bloc1 { float: left; width: 540px; height: auto; margin-left: 40px; } #bloc2 { float: right; width: 200px; height: auto; margin-right: 20px; } Le souci est que la div "bloc2" se positionne bien à droite de la div "bloc1" mais les 2 autres div "global" et "page" remontent s'écrasent tout en haut de la page. J'espere me faire comprendre. Est ce quelqu'un aurait une solution a mon probleme que je n'arrive à résoudre SVP. Merci d'avance.

allan · Answer

Personne n'aurait une petite idée SVP

notobe · Answer

Le souci ne vient pas de FF, le souci vient d'IE...

Je ne sais pas ce que vous voulez faire exactement, mais le float:right est inutile.
C'est une marge qu'il faut définir.
Vu que le bloc 1 a une largeur de 580 px (540+40), il faut définir pour le bloc 2 une marge d'au moins autant.

#bloc2 {
margin-left:580px;
width: 200px; 
height: auto;
margin-right: 20px; 
}

dutom007 · Answer

Pourrais tu marquer la fermeture des div anfin de bien savoir quoi englobe quoi.
Merci

jona303 · Answer

il me semble que les div sont bien fermées. :)
et si tu met un height à global juste pour voir ?
Sinon le truc cool avec firefox c'est le plugin firebug,.. avec tu peux éditer ta css "en live" pour bien voir ce qui peut faire changer quoi,..
En tous cas une chose est sure, le probleme c'est pas FF, mais bien IE...  ;)

dutom007 · Answer

Je n'avais pas vu les div de fin :p Sinon pour une compatibilité optimal il faut procéder comme suit:

contenu de la page ....

ce block est en float left

ce block est en float right

//Ce div permet de stoppé tout remonter du au float du dessus

La largeur+padding+margin de block1-2 ne doit pas etre superieur à page et la somme des largeurs+padding+margin de block1 et block2 ne doit pas etre superieure à block1_2

jona303 · Answer

ouais j'avais pas vu mais en fait peut etre que de mettre un width 801px a la place de 800 reglerait le problème.. ^^

allan · Answer

Hello tout le monde, en fait ce que je veux faire c'est une page avec deux colonnes "bloc1" et "bloc2" avec chacune du contenu dans cette même page. Et mon code marche sous IE 7 mais pas sur Firefox. 

Je ne sais pas si je me fais bien comprendre, par exemple si je regarde sur CCM, j'ai une colonne ou je suis en train d'écrire ce message puis une deuxieme à droite ou il y a : "A voir également", "ils ont besoin de votre avis", "les interviews exclusives" etc... Voila en gros.

dutom007 · Answer

"Le souci est que la div "bloc2" se positionne bien à droite de la div "bloc1" mais les 2 autres div "global" et "page" remontent s'écrasent tout en haut de la page. "

S'il n'y a que deux colonnes qu'est ce qui est écrasé?

jona303 · Answer

Bon et si tu filais un lien?? :)

allan · Answer

Ok les gars je vais tester cela merci

allan · Answer

Ce qui remonte en haut de page et qui est écrasé ce sont les div "global" et "page" j'ai pas de lien pour l'instant désolé

dutom007 · Answer

Mais si ta page n'a que deux colonne il n'y a rien dans global et page...

Pourrais tu décrire le role de chaque div:
global: contient le site
page:un div header, un div menu et un texte d'intro puis les deux div block1 et block 2 puis un texte de fin et un div footer

Car la ce n'est clair pour personne je pense.

Une capture d'écran pourrait aider....

allan · Answer

Ok je fais un plan vite fait du site avec une capture d'ecran et je re

allan · Answer

voila en gros la structure des div: https://sites.google.com/site/ggledav/home

dutom007 · Answer

Ou seront les deux block?

allan · Answer

bloc2 à droite de bloc1 qui sont a l'intérieur de div "page"

dutom007 · Answer

Lol ça on la compris... Je te demande au dans ton exemple, en dessus du menu ou dessous? Y aura t il du texte en dessus ou dessous.... Sinon moi je le vois comme ça:

**** ****: Si dans page il n'y a que les deux colonnes, tu mets les de div block (sachant que comme précisez la somme des largeurs+padding+margin ne doivent pas être sup à la taille de page) puis suis du

Si tu as du texte avant et/ou aprés tu écrit ton texte puis crée un

qui englobe les deux block et a la meme taille que suivie du texte

allan · Answer

en fait le menu est intégré dans le footer pas dans la div "page", je vais procéder comme tu viens de me dire...

allan · Answer

euhh non le menu est dans le header lol

allan · Answer

Je viens de tester ta procédure ca marche nickel super!! je te remerci mille fois mec trop cool tu ma enlever une belle épine du pied merci encore...

dutom007 · Answer

Aucun soucis,

Il faut juste imaginé cela le plus simple possible.
Petite astuce si un jour le cas arrive pour 3 colonne, il faut tout divisé en deux soit un div (left) qui contient la colonne 1 (left) et 2 (right) et la colonne 3 (right) à part.
Bien sur il faut toujours que: (l1=largeur colonne1; p1=padding colone1; m1 ta compris ^^)
l1+p1+m1+l2+p2+m3=Largeur du div qui les englobe (l1_2)
et
l1_2+p1_2+m1_2+l3+p3+m3=Largeur de ton contener (page pour toi)

allan · Answer

Ok ca roule maintenant lol

SVP gros souci de DIV en FLOAT sous firefox - Page 2

Discussions similaires

Newsletters