CSS max-width pour cent

max-largeur avec un pour cent ne semble pas fonctionner dans les deux IE 8 ou Firefox 3. Pixel en largeurs de travail de l'amende. Ai-je raté quelque chose?

J'ai un formulaire de saisie, et je veux afficher un texte explicatif à la droite de celui-ci. Mais je ne veux pas le texte explicatif de la courge à la forme.

Je n'ai pas utilisé max-width avant, mais il semblait être une excellente solution. J'ai écrit cette simple feuille de style CSS:

div.hint {max-width: 50%; float: right;}

Ensuite, j'ai écrit:

<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...

De la div.indicateur de courges la forme gravement à la gauche.

J'ai essayé avec juste un peu de texte au lieu de la forme. La div.indice prend environ 95% de l'écran, donne juste une petite marge sur la gauche, et l'autre texte est poussé complètement en dessous.

Si je change le max-width à partir d'un pourcentage à un nombre fixe de pixels, il semble fonctionner. Mais je ne veux pas de la fonder sur des pixels parce que je ne connais pas les dimensions du navigateur de l'utilisateur.

Ne % pas travailler avec max-width malgré ce que j'ai lu dans la documentation, ou ai-je raté quelque chose?


En réponse à Seanmonster commentaire: Ici, je vais vous donner un trivial mais complète de la page web qui illustre ce que je pensais devrait fonctionner, mais n'a pas:

<html><title>Max width test</title>
<style>
.form {max-width: 75%; float: left;}
.hint {max-width: 50%; float: right;}
</style>

<div class=hint>
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated,
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc.
</div>
<div class=form>
<table>
<tr><th>Label 1 <td>Value 1
<tr><th>Label 2 <td>Value 2
<tr><th>Label 3 <td>Value 3
</table>
</div>
</html>

Quand j'ai ouvert cette page dans un navigateur, j'obtiens, pas deux colonnes, mais le "hint" div prenant 100% de la largeur, et au-dessous de la "forme" div prenant 100% de la largeur. Si je modifie à la fois le max-width pour "width: 50%", j'obtiens deux colonnes que je m'attends. Apparemment, je suis absent quelque chose à propos de la façon dont max-width est censé fonctionner, mais ... je ne l'obtenez pas.

Avec les informations que vous avez donné, votre problème ne devrait pas exister. Peut-être que vous pourriez nous un lien vers un exemple afin que nous puissions voir ce qui se passe dans la nature.
J'ai ouvert votre exemple de code dans FF3.5.3 sur Mac et PC et il a très bien fonctionné. Je ne obtenir le comportement que vous décrivez dans IE 7, et n'ont pas 8 afin de le tester.
J'ai seulement tenté l'exemple ci-dessus avec IE 8 avant de le poster. Je vais prendre votre mot sur ce que cela fonctionne avec Firefox. Mais j'ai essayé d'autres, les exemples de ce genre qui a échoué de la même façon avec Firefox, donc, apparemment, ils ne sont pas totalement à l'abri de la cause de racine ici. En tout cas, je veux vraiment quelque chose qui fonctionne avec au moins IE 7, IE 8 et Firefox 3, comme ceux qui sont sans doute le plus populaire des navigateurs.

OriginalL'auteur Jay | 2009-10-04

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *