nicht angemeldet
Hallöchen,
ich suche seit Tagen vergeblich danach, wie ich ein div dazu bringen kann,
a) nur so breit zu sein wie sein Inhalt
b) bei weniger Platz den enthaltenen Text umzubrechen, ohne unter das benachbare div zu rutschen
Situation: zwei kurze Texte, die nebeneinander stehen sollen.
Problematik: keine feste Schriftgröße, muss auch bei unterschiedlicher Auflösung bzw. in verkleinertem Browserfenster funktionieren. Wenn die Schriftgröße des Browsers oder das Browserfenster in seiner Größe geändert wird, brauchen die beiden Texte ja verschieden viel Platz.
Bei großer Auflösung bzw. kleiner Schriftgröße soll das so aussehen:
| <- Breite Viewport -> |
| ---------------------- ----------------------------------- |
| | hier ist ein kurzer | | hier ist ein etwas längerer Text, | |
| | Text mit insgesamt 3 | | der im Normalfall ebenfalls nur | |
| | Zeilen Platzbedarf | | insgesamt 3 Zeilen Platz braucht | |
| ---------------------- ----------------------------------- |
Bei kleiner Auflösung bzw. großer Schriftgröße soll es so aussehen:
| <- Breite Viewport -> |
|--------------- ------------------------|
| hier ist ein | hier ist ein etwas |
| kurzer Text | längerer Text, der im |
| mit insgesamt | Normalfall ebenfalls |
| 3 Zeilen | nur insgesamt 3 Zeilen |
| Platzbedarf | Platz braucht |
|--------------- ------------------------|
Hat irgend wer ne Idee, wie ich das mit CSS und div's lösen kann?
Anmerkung:
- Mit float:left bzw. right und prozentualer Breitenangabe schiebt mir der Firefox bei zu wenig Platz die div's versetzt untereinander.
- Der IE nutzt teilweise 100% des Viewports, obwohl das Ganze im content-div ist, das 70% des Viewports nutzt.
- Beide bringen mir keinen Abstand zwischen den div's, wenn viel Platz ist (siehe erstes Beispiel).
Ich könnte es ja bequem mit Tabellen lösen, aber da hier Tabellen für Layout-Zwecke verpönt sind, wollte ich es mit CSS hinbekommen.
MfG
vaudi