Max-width mit einer Prozentangabe scheint weder im IE 8 noch in Firefox 3 zu funktionieren. Bestimmte Pixelbreiten funktionieren problemlos. Übersehe ich etwas?
Ich habe ein Eingabeformular und möchte rechts daneben einen erklärenden Text anzeigen. Aber ich will nicht, dass der erklärende Text das Formular zerdrückt.
Ich habe max-width noch nie verwendet, aber es schien eine ausgezeichnete Lösung zu sein. Ich habe diesen einfachen CSS-Stil geschrieben:
div.hint {max-width: 50%; float: right;}Dann schrieb ich:
<div class=hint>... hint text</div>
<form action=xxx method=post>
... etc ...Der div.hint quetscht das Formular stark nach links.
Ich habe dies mit etwas Text anstelle des Formulars versucht. Die div.hint nimmt etwa 95% des Bildschirms, gibt nur einen kleinen Rand auf der linken Seite, und dann der andere Text wird vollständig unter ihm geschoben.
Wenn ich die maximale Breite von einem Prozentsatz auf eine feste Anzahl von Pixeln ändere, scheint es zu funktionieren. Aber ich möchte es nicht auf Pixel basieren, weil ich die Abmessungen des Browsers des Benutzers nicht kenne.
Funktioniert Prozent nicht mit max-width trotz, was ich in der Dokumentation lesen, oder bin ich etwas übersehen?
Als Antwort auf den Kommentar von Seanmonster: Hier gebe ich eine triviale, aber vollständige Webseite an, die veranschaulicht, was meiner Meinung nach funktionieren sollte, aber nicht funktioniert:
<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>Wenn ich diese Seite in einem Browser öffne, erhalte ich nicht zwei Spalten, sondern das Div "hint", das 100% der Breite einnimmt, und darunter das Div "form", das 100% der Breite einnimmt. Wenn ich beide max-width's auf "width: 50%" ändere, erhalte ich zwei Spalten, wie ich es erwarten würde. Offensichtlich habe ich etwas verpasst, wie max-width funktionieren soll, aber ... ich verstehe es nicht.
