Divs gleich lang (eins abhängig vom anderen)

Toast

Tripel-As

Dabei seit: 02.01.2011

Beiträge: 210

Dienstag, 15. März 2011, 21:53

Hi,

ich hätte gerne zwei Divs, die immer gleich lang sind.
Das ist mir mit folgendem Code (vereinfacht) gelungen:

HTML

<div style="height: auto; overflow: hidden; width: 90%; background-color: #ff3;">
      <div style="padding-bottom: 32768px; margin-bottom: -32768px; float: left; background-color: #00f; width: 20%;">
      Test
      </div>
      <div style="padding-bottom: 32768px; margin-bottom: -32768px; float: right; background-color: #0f0; width: 80%;">
      Test
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
      <div style="clear: both;"></div>
    </div>

Das war's eigentlich, dachte ich mir. Nun habe ich jedoch das Problem, dass ich für mein Projekt möchte, dass das eine Div, sei es hier das blaue, nicht die Höhe vorgeben kann, sich also nur anpasst (kurz: Wenn der Inhalt von diesem Div größer ist als der Inhalt vom anderen Div, wird es abgeschnitten). Es genügt mir, wenn es ab IE 7 funktioniert (und natürlich FF...).

Gruß, Toast

Vulpire GbR - Marketingagentur in Köln und Dülmen

jegi0605

Routinier

Dabei seit: 10.01.2011

Beiträge: 259

Dienstag, 15. März 2011, 23:02

Hi ,

In CSS2 gibt es dafür keine Lösung , musst Du wohl auf CSS3 warten. Da solls dann funktionieren.

Gruß
Jens

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

Dienstag, 15. März 2011, 23:22

Du könntest es aber mit Grafiken machen:

Du erstellst eine Grafik die den roten Streifen umfasst.
Dann erstelst Du einen Div und motzt ihn mit CSS auf:

	Cascading Style Sheet
1 2 3	#deinDiv{ background: url("../roterStreifen.png") repeat-y; }

Mit diesem Prinzip kannst Du auch wunderbar Schatten usw. darstellen...

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

Toast

Tripel-As

Dabei seit: 02.01.2011

Beiträge: 210

Mittwoch, 16. März 2011, 10:15

Ja, das wäre ne Alternative, aber ich habe das Problem, dass ich Bilder in dieses Div lade und die würde ich wohl auch per background-image laden, nur habe ich dann das Problem, dass sich diese ja auch nicht skalieren lässt, was aber bei meinem Div unbedingt notwendig ist.

Also, wenn noch jemand Ideen hat :thumbup:

Gruß, Toast

Edit: Ich habe nach einigen Überlegungen eine Lösung gefunden - ein neuer Durchbruch? :thumbsup:

.
Ich habe das Div, welches die Länge nicht vorgeben soll mit overflow: hidden und position: absolute versehen (die anderen natürlich mit position: relative). Der Code sieht nun wie folgt aus und funktioniert (getestet) in IE7, IE8, FF.

HTML

<div style="height: auto; position: relative; overflow: hidden; width: 90%; background-color: #ff3;">
      <div style="position: relative; padding-bottom: 32768px; margin-bottom: -32768px; float: left; background-color: #00f; width: 20%;">
      Test<br><br>
      </div>
      <div style="position: absolute; overflow: hidden; padding-bottom: 32768px; margin-bottom: -32768px; float: right; background-color: #0f0; width: 80%;">
      Test
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      </div>
      <div style="clear: both;"></div>
    </div>

Gruß, Toast

Vulpire GbR - Marketingagentur in Köln und Dülmen

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Toast« (16. März 2011, 10:15)