Tabellen-ähnliche Struktur mittels CSS

[Jagged]

High zusammen,

eigentlich geht es gar nicht mal um eine richtige Tabelle, ich möchte nur zwei Bereiche nebeneinander darstellen, von denen der linke genau so breit is wie sein Inhalt (nebst padding und so), der rechte dann (fast) den gesamten Berich bis zum rechten Rand (allerdings mit style="right:15px") einnimmt. In diesem rechten Bereich soll der Text dann auch rechtsbündig erscheinen.

Da ich vorher schon etwas tabellen-artiges mit CSS gebastelt hatte, habe ich bisher folgenden Ansatz verfolgt:

  
  .ntab {       /* keine Ahnung, ob das nötig ist */  
    width:100%;  
  }  
  .nrow {       /* das schon eher */  
    display:table-row;  
    /*right:15px;*/  
    width:100%;  
  }  
  .nrowl {  
    display:table-cell;  
    /*width:10%;*/  
  }  
  .nrowr {  
    display:table-cell;  
    padding-left:1ex;  
    /*right:15px;*/  
    /*min-width:5%;*/  
    /*width:100%;*/  
    text-align:right;  
  }  

Die aktuell sichtbaren Angaben für width, right und min-width sind mehr oder minder willkürlich, daher hier mal auskommentiert. Ich habe schon so ziemlich alle Kombinationen durch.

Im HTML-Part sieht es dann so aus:

  
  <div class="ntab">  
    <div class="nrow">  
      <div class="nrowl">  
        Text für die linke Seite  
      </div>  
      <div class="nrowr">  
        Text für die rechte Seite  
      </div>  
    </div>  
  </div>  

So, welche Geometrie-Werte sollte ich nun angeben, damit die linke Seite abhängig von ihrem Inhalt dimensioniert wird, die rechte dagegen den Rest einnimmt?

nrowr.width:100% funktioniert auf den ersten Blick, erzeugt aber im linken Teil Zeilenumbrüche, wenn der Text aus mehreren Worten besteht.

nrowl.width: oder nrowl.min-width: mit irgendwelchen Werten zu füllen, verhackt mir die Breite der linken Seite, sollte sie doch mal weniger Platz brauchen. Das wäre möglicherweise nicht so schlimm, aber diese "Zelle" hat eine andere Hintergrundfarbe als der Rest des Dokuments, also ist der Effekt sichtbar und wirkt ziemlich unausgeglichen.

width=* (wo auch immer) scheint überhaupt keinen Effekt zu haben.

Irgendein Kenner hier, der mir da weiterhelfen kann? Danke im Voraus und schönen Gruß,

Jagged

[Jagged]

{code lang=css]
  .ntab {       /* keine Ahnung, ob das nötig ist */
    display:table;
    width:100%;
  }
[/code]

So natürlich... hatte es aber tatsächlich anfänglich vergessen :-/

[Jagged]

Gibt's hier auch ein Edit nach unterschlagener Vorschau? :-p

  
  .ntab {       /* keine Ahnung, ob das nötig ist */  
    display:table;  
    width:100%;  
  }  

[Matthias Apsel]

Om nah hoo pez nyeetz, Jagged!

Gibt's hier auch ein Edit nach unterschlagener Vorschau? :-p

Nein.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Jagged!

So, welche Geometrie-Werte sollte ich nun angeben, damit die linke Seite abhängig von ihrem Inhalt dimensioniert wird,

hier heißt der Suchbegriff wohl "shrink to fit css". Interessant find ich immer Brunildos Experimente.

die rechte dagegen den Rest einnimmt?

sollte dann mit display: table-cell von selbst erledigt sein.

• Ungetestet -

Matthias

[Jagged]

Om nah hoo pez nyeetz, Jagged!

auch so :-)

hier heißt der Suchbegriff wohl "shrink to fit css". Interessant find ich immer Brunildos Experimente.

Ja, wenn man weiß, wonach man gucken muss...

sollte dann mit display: table-cell von selbst erledigt sein.

• Ungetestet -

Ja, also hier funktioniert's nicht... entweder ist der linke Bereich gewrappt (nur bei einem einzelnen Wort eben nicht) oder der rechte reicht nicht bis rechts.

Zur Info: hab ein bisschen mit den float: Einstellungen gespielt. Ein Keyword "shrink" gibt es ja scheints nicht. Ein Hinweis in die Richtung wäre mir ganz recht.

Jagged