div nur so breit wie nötig

[vaudi]

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

[Apropos]

Hi,

ich würde sagen, das Ganze hat nur eine Chance zu funktionieren, wenn die beiden Textblöcke eine prozentuale Breite haben. Bei dem HTML-Code

<div id="content">  
 <div class="column" id="left">Hier ist ein kurzer Text mit insgesamt 3 Zeilen Platzbedarf. Hier ist ein kurzer Text mit insgesamt 3 Zeilen Platzbedarf.</div>  
 <div class="column" id="right">Hier ist ein etwas längerer Text, der im Normalfall ebenfalls nur insgesamt 3 Zeilen Platz braucht. Hier ist ein etwas längerer Text, der im Normalfall ebenfalls nur insgesamt 3 Zeilen Platz braucht.</div>  
</div>

würde ich dann zwei Möglichkeiten sehen:

1. Mit float:

#content {  
 height: 0px;  
 height: 25px;  
 width: 70%;  
 max-width: 70%;  
 background: blue;  
 margin: auto;  
 }  
  
.column {  
 height: auto;  
 width: auto;  
 background: red;  
 }  
  
#left {  
 width: 32.5%;  
 margin-left: 5%;  
 float: left;  
 }  
  
#right {  
 width: 52.5%;  
 margin-right: 5%;  
 float: right;  
 }

2. Mit position:absolute :

#content {  
 position: relative;  
 top: 0px;  
 left: 0px;  
 height: 0px;  
 height: 25px;  
 width: 70%;  
 max-width: 70%;  
 background: blue;  
 margin: auto;  
 }  
  
.column {  
 position: absolute;  
 top: 0px;  
 height: auto;  
 width: auto;  
 background: red;  
 }  
  
#left {  
 left: 5%;  
 width: 32.5%;  
 }  
  
#right {  
 right: 5%;  
 width: 52.5%;  
 }

Hab beide erfolgreich in IE7 und FF3 getestet.

Gruß, Apropos

[vaudi]

Hallöchen,

Vorbemerkung: Ich hab hier zum Testen
  FF 1.07 und FF 2.0.0.16
  IE 5.0  und IE 6.0

ich würde sagen, das Ganze hat nur eine Chance zu funktionieren, wenn die beiden Textblöcke eine prozentuale Breite haben.

würde ich dann zwei Möglichkeiten sehen:

1. Mit float:

funktioniert mit beiden FF

die beiden IE machen bei wenig Platz sowas:
 -------
|       |
 -------
      ---------
     |         |
      ---------

2. Mit position:absolute :

Hab beide erfolgreich in IE7 und FF3 getestet.

Und sowohl IE5 / IE6 als auch FF1 / FF2 machen, was ich will.

Daaaaaaaaaaaaaaaaaankeeeeeeee!!!

MfG
vaudi