Box mit variabler Breite

[alexf812]

Hi,

in einer Box gibt es links ein Bild und rechts daneben Text. Die Größe des Bildes ist immer gleich (80px). Wenn sich die Gesamtbreite der Box ändert, wie kann ich dann erreichen, das der rechts neben dem Bild stehende Text sich automatisch auf die restliche Breite ausdehnt?

Mit % geht es nicht, da ja je nach Gesamtbreite ein Wert von z.B. 60% unterschiedlich groß ist. Hat die Box 400 px Breite, dann ist neben dem Text noch Platz. Ist die Box nur 100px steht der Text schon unter dem Bild, weil der Platz daneben nicht ausreicht.

ich wollte damit erreichen, das ich unterschiedliche Größen angeben kann, ohne für jede Größe das ganze CSS anpassen zu müssen, sondern nur die Breite der Box.

Hat jemand eine Idee?

[wildmieze]

*kratzamkopp* .. eigentlich müsste sich der Text automatisch ausdehnen .. oder ich versteh gerade was falsch^^ .. zeig mal ein Stück von Deinem Code ..

[alexf812]

Hi,

nee der dehnt sich nur so weit aus, wie auch das umgebende p-tag ist.
aber ich konnte es löasen, und zwar habe ich dem bild ein float: left gegeben und dem p-tag ein margin-left in der Breite des Bildes. Nun dehnt sich der Text immer bis zum Rand der box aus, egal wie breit die gesamte Box ist.

[wildmieze]

Jepp, so hatte ich mir das auch gedacht .. ich hatte mich halt gefragt, warum der Textcontainer (Dein <p>) überhaupt ne feste Breite hat, wenn eh noch eine Box drumrum ist^^

[alexf812]

hi,

na ich hatte erst dem p-Tag noch ein float gegeben, den wenn ich dann keine Breite angebe, liegt der Absatz ja unter dem Bild. Deswegen musste man eine Breite angeben.
Nun hab ich das float entfernt und dafür margin-left
Oder geht ein float ohne eine feste breite anzugeben und ohne das dieses element unter das anere rutscht?

<div class="box">
<img src="" />
<p>text</p>
</div>

[wildmieze]

Ahaa .. jetzt versteh ich den Gedankengang^^ .. ja, soweit ich weiß, ist bei float eine Breitenangabe erforderlich. Mag daran liegen, daß jedes Blockelement erstmal pauschal eine Breite von 100% hat. Und 100% plus Bild passen halt nicht in eine Zeile .. und da es keine Möglichkeit gibt, Pixel von Prozenten abzuziehen (wie Du ja schon festgestellt hast), ist Deine Lösung mit margin-left schon die Richtige. Zumindest, wenn der Text nicht unter dem Bild weiterlaufen soll, wenn er länger ist.