automatische breitenverteilung zweier felder/boxen

[andi_b]

moin ihr alle,

ich bräuchte gerade eine möglichkeit folgendes zu bauen:

-----------------------------------
|text|                            |
------=============================

-----------------------------------
|breiterer text|                  |
----------------===================

das ganze mit zwei divs oder einer table, ist egal; die '=' bekommen einen schwarze kante, was dann wie ein strich neben dem text aussieht.

problem:
ich muss dem rechten feld sagen können, dass es 'allen platz der frei ist' nimmt, aber nicht mehr. wenn ich 100% nehme, quetscht mir das immer meinen text zusammen. ich habe leider auch keine möglichkeit gefunden, den text in einer zeile zu halten.

weiss da jemand was :)

viele grüsse,
andi

[Marc]

Moin moin> moin ihr alle,

ich bräuchte gerade eine möglichkeit folgendes zu bauen:

---

|text|                            |
------=============================

---

|breiterer text|                  |
----------------===================

Für die rechte Box (div) width:auto

Gruß,
Marc.

[Ingo Turski]

Hi,

Für die rechte Box (div) width:auto

bzw. width einfach weglassen. Und für die linke Box natürlich float:left mit einer passenden width.

freundliche Grüße
Ingo

[andi_b]

hey,
leider funktionieren eure tips beide nicht. das problem ist, dass ich dieses konstrukt universell benutzen möchte - egal wie viel text darin ist. im moment sieht es gerade so aus:

<table style="width:100%;">
  <tr>
    <td style="width:'.$insertWidth.'%;">
      <div>'.$insertText.'</div>
    </td>
    <td style="width:'.(100-$insertWidth).'%; padding-bottom:3px;">
      <div style="border-bottom:1px solid '.$this->color.';">&nbsp;</div>
    </td>
  </tr>
</table>

bzw:

<div style="float:left;">'.$inputText.'</div>
<div style="float:right; width:'.(100-$this->width).'%; border-bottom:1px solid '.$this->color.'">&nbsp;</div>

da muss ich aber immernoch eine breite mit angeben, was natürlich nicht so rockt...

danke euch,
andi

[Ingo Turski]

Hi,

<div style="float:left;">'.$inputText.'</div>
<div style="float:right; width:'.(100-$this->width).'%; border-bottom:1px solid '.$this->color.'">&nbsp;</div>

da muss ich aber immernoch eine breite mit angeben, was natürlich nicht so rockt...

poste doch bitte den Code, der beim Browser ankommt; dies ist kein serverseitiges Problem.

<div style="float:left; width:10em;">Dein linker Text</div>
<div>Dein Inhalts-Text</div>
funktioniert natürlich. Du hast vergessen, zum float auch eine Weite zu geben und wenn Du das zweite DIV auch floaten läßt, benötigt es ebenso eine Weite - das float ist aber überflüssig.

Wenn Du nun zusätzlich für den Inhaltsbereich einen border angeben willst, benötigst Du margin, damit dieser nicht auch unter das gefloatete Element geht, also z.B.:
<div style="margin-left:11em; border-bottom:1px solid black;">Dein Inhalts-Text</div>

freundliche Grüße
Ingo

[andi_b]

funktioniert natürlich. Du hast vergessen, zum float auch eine Weite zu geben

das will ich doch gerade nicht, damit die breite autmatisch an den text angepasst wird.

ich habe jetzt aber folgendes konstrukt:

<div style="float:left; border: 1px solid #FFFFFF; background: #FFFFFF">inhalts-text</div>
<div style="border-bottom:1px solid #000000">&nbsp;</div></td>

...das funktioniert. hier wird zwar die border etwas mißbraucht, da sie nur die linie unten verdecken soll, aber egal ;)

vielen dank,
andi

[Ingo Turski]

Hi,

funktioniert natürlich. Du hast vergessen, zum float auch eine Weite zu geben

das will ich doch gerade nicht, damit die breite autmatisch an den text angepasst wird.

wenn so etwas funktioniert (was bei den derzeitigen Browsern unter bestimmten Umständen tatsächlich der Fall ist), dann ist es Glücksache, denn float erfordert nach dem Standard immer eine Weite.

freundliche Grüße
Ingo