[$traight-$hoota]

Ich möchte ein Blockelement (in diesem Fall address) so anordnen, dass es nicht die gesamte Breite des verfügbaren Platzes einnimmt, sondern lediglich so breit wird, wie der enthaltene Text es erfordert (im Beispiel also bei einer nichtproportionale Schriftart ca 15 em).

<address>Max Mustermann
Hauptstraße 1
12345 Neustadt</address>

Prinzipiell sollte sowas ja per width:auto lösbar sein, normale Blockelemente werden damit aber genau so breit, dass sie in das umgebende Element reinpassen, also 100% - (margin + border + padding).
Als möglich Lösungen hab ich folgendes gefunden (mit width:auto)

• position:absolute - denkbar schlechteste lösung, da dann irgendwie anders der platz freigehalten werden muss (z. B. ein duplikat des elements mit position:relative und visibility:hidden)
• float:left - dazu muss aber ein Element folgen, dass clear:left als Eigenschaft besitzt
• display:table-cell - funktioniert ohne mehraufwand, ist aber imo nicht sehr sauber, einfach eine tabellenzelle in der gegend stehen zu haben, und funktionert nicht im IE (zumindest bis 6)

Oder steh ich jetzt nur irgendwie auf dem schlauch und es gibt ne ganz einfache Lösung??

[Xean]

Zitat von $traight-$hoota

[...], dass es nicht die gesamte Breite des verfügbaren Platzes einnimmt, sondern lediglich so breit wird, wie der enthaltene Text es erfordert

Wie wäre es mit einem display:inline? Dann brauchst du kein position und kein width.

[$traight-$hoota]

das zerhaut mir das ganze aber erst total. das address-feld ist eben ein block-element.

[dago]

Wenn ich dich richtig verstanden habe, dann geht es dir wahrscheinlich um den Rand. Der Rand soll sich immer am Text orientieren. Allerdings die Zeile nur diesen Text enthalten.

Also ich würde es so lösen:

<p><address>Max Mustermann
Hauptstraße 1
12345 Neustadt</address></p>

address natürlich in ein "inline" Element umwandeln.

[$traight-$hoota]

Also mir geht es darum, dass es so angezeigt werden soll, wie auf dem Screenshot:

Also das Address-Feld ist nur so groß, wie der Text, der Teil rechts bleibt frei.
Dazu verwende ich diesen CSS-Code:

address {
    display: table-cell;
    padding: 0.5em 1em;
    white-space: pre;
    width: 20em;
}

Die Breitenangabe per width fungiert dabei lediglich als Mindestbreite für Elemente mit kurzen Zeilen, dass die nicht so mikrig aussehen (min-width scheint keinen Effekt bei display:table-cell zu haben); bei dem Screenshot hat es aber keine Auswirkungen, da das Feld breiter asl 20 em ist.

Also ich denke, dass das eigentlich eine ganz gute Lösung ist, die auch von allen getesteten Browsern so angezeigt wird, wie ich es mir wünsche (außer IE < 6). Das "Problem" sehe ich nun als gelöst an und ich glaube nicht, dass es noch eine andere (einfache) Möglichkeit gibt.
Aber vielen Dank für eure Hilfe!