SVP gros souci de DIV en FLOAT sous firefox
Résolu
allan
-
allan -
allan -
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
CSS
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.
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
<div id="global"> <div id="page">(bordure de la page) <div id="bloc1">(contenu à gauche de la page)</div> <div id="bloc2">(contenu à droite de la page)</div> </div> </div>
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.
A voir également:
- SVP gros souci de DIV en FLOAT sous firefox
- Video downloadhelper firefox - Télécharger - Outils pour navigateurs
- Telecharger firefox - Télécharger - Navigateurs
- Exporter favoris firefox - Guide
- Comment supprimer bing de firefox - Guide
- Ghostery firefox - Télécharger - Web & Internet
22 réponses
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.
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;
}
Je n'avais pas vu les div de fin :p
Sinon pour une compatibilité optimal il faut procéder comme suit:
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
Sinon pour une compatibilité optimal il faut procéder comme suit:
<div id="global">
<div id="page">
contenu de la page ....
<div id="block1_2>
<div id="bloc1">
ce block est en float left
</div>
<div id="bloc2">
ce block est en float right
</div>
</div>
<div style="clear:both"></div> //Ce div permet de stoppé tout remonter du au float du dessus
</div>
</div>
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
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 <div clear:both>
Si tu as du texte avant et/ou aprés
tu écrit ton texte puis crée un <div> qui englobe les deux block et a la meme taille que <page> suivie du texte
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:
<body>
<global>
<header>
<menu>
</menu>
</header>
<page>
****
</page>
<footer>
</footer>
</global>
</body>
****:
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 <div clear:both>
Si tu as du texte avant et/ou aprés
tu écrit ton texte puis crée un <div> qui englobe les deux block et a la meme taille que <page> suivie du texte
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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... ;)
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... ;)
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.. ^^
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.
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.
"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é?
S'il n'y a que deux colonnes qu'est ce qui est écrasé?
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é
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....
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....
