Largeur automatique, conflit IE/Firefox

Salut,

Je pense que ce sujet a déjà été traité (bien que je n'ai rien trouvé dans mes recherches), mais histoire de comprendre une bonne fois pour toute, je me permets de créer un nouveau sujet.

Le principe est tout simple, je développe un site, qui possède une largeur automatique en fonction de l'écran. J'ai actuellement un bloc principal, placé en dessous de deux menus verticaux (à droite et à gauche). J'utilise alors deux padding (left et right) pour passer mon texte sous ces deux blocs.

Le problème, c'est que lorsque je dis à mon bloc que je veux qu'il prenne 100% de ma page, sous IE, ça marche, mais sous Firefox, il m'ajoute les "padding" à ce 100%, chose tout à fait normale.

Pour résoudre ce problème j'ai donc choisi de mettre une largeur automatique seulement pour Firefox. Avec un Lorem Ipsum, ça fonctionne, mais si je n'ai pas de texte, mon bloc devient ridiculeusement petit.

Je mets un peu de CSS pour aider.

Ma "version pour Firefox"

html > body #total #corps {
width : auto;
padding-right : 80px; /* Pour passer le bloc de droite */
padding-left : 255px; /* pour passer le bloc de gauche */
}

Ma "version pour IE"

#total #corps {
width : 100%;
padding-right : 80px; /* Pour passer le bloc de droite */
padding-left : 255px; /* pour passer le bloc de gauche */
}

Petite précision, je suis actuellement sur un version portable de Firefox, et utilise IE Tab pour tourner sous IE. Je n'ai pas la capacité de comparer sur d'autres navigateurs pour le moment.

Ma question est tout simple, par rapport à la phrase en gras, comment faire pour lui associer une largeur même sans le texte ? J'ai bien évidemment testé les max/min-width mais sans succès.


Merci pour la future aide
Modifié par Georges Abitbol (15 Jun 2011 - 15:40)

Oh mon dieu ...

si tu veux prendre toute la page c'est avec "width : 100%"
ensuite pour des conteneurs au dessus tu leurs mets un "float : right" pour celui de droite
et un "float : left" pour celui de gauche, on utilise pas des "padding" pour jouer sur la taille
de l'écran et forcer un conteneur a se placer correctement quand même.
Puis pour le conteneur en dessous un "clear:both"

de plus ton code HTML serait le bienvenue pour être sûr de ce que je dis.

Sinon de rien
Modifié par Vipear (15 Jun 2011 - 16:12)

Voila le code HTML. L'id "corps" est le bloc à mettre en dessous.

<div id="total">
. .<div id="corps"></div>
. .<div id="blocdroite"></div>
. .<div id="blocgauche"></div>
</div>

Ensuite je ne crois pas que tu m'ais compris : je ne cherche pas à placer mon bloc grâce à des paddings, mais juste le texte qu'il contient (pour que le texte ne passe pas sous les menus). J'ai vu cette technique sur un certain site où on part de zéro, je pensais que ça se faisait.


Enfin, dernière chose, je ne sais pas si ta remarque était aggressive ou non, mais sache que je suis débutant dans le domaine du développement web et qu'il faut un minimum de pratique pour pouvoir être habile avec les bonnes manières. Pas la peine de crier au scandale si tu vois quelque-chose qui te sort par les oreilles.


Merci quand même pour l'aide, l'utilisation du

clear:both

n'est vraiment pas bète.
Modifié par Georges Abitbol (15 Jun 2011 - 16:45)

Georges Abitbol a écrit :

<div id="total">
. .<div id="corps"></div>
. .<div id="blocdroite"></div>
. .<div id="blocgauche"></div>
</div>

L'homme le plus class du monde qui n'utilise que des id : vraiment ...

Dans se cas fait cela :

#total
{
width:500px
}

#corps
{
width:100%
}

#blocdroite
{
float:right
width:250px
}

#blocgauche
{
float:left
width:250px
}

Je pense que sa devrait faire l'affaire, par contre j'ai mit une largeur a "total" de 500px mais libre a toi de changer, et surtout oublie pas, la somme des largeurs de tes conteneurs "blocdroite & blocgauche" doit être égal ou inférieur à la largeur de "total".

Ensuite a l'intérieur de tes conteneurs si il y a du texte tu le met entre <p> et tu l'ajusteras avec "margin" pour le situé dans tes conteneurs.

Après si je cri au scandale c'est pour
1) Car sa me choc lol
2) Que ma réaction te marque
3) Que sa te marque pour que tu ne recommences pas

ps : le "width:100%" de "corps" je ne suis pas réellement sûr qu'il soit utile mais bon

Salut Vipear,


Merci beaucoup pour l'aide. La je n'ai pas le temps de m'occuper de mon problème (je suis un homme très demandé), mais je prends en note les conseils de ton dernier message.

Je te remercie pour l'aide apportée. Je viendrai te redire ici (pas avant lundi minimum ) si tes suggestions étaient bonnes.


A+