• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Einheitliche Größe von zwei nebeneinander liegenden floats

S

Stylesau0815

Neues Mitglied
Hallo,

habe die Suche benutzt, aber nichts gefunden, vielleicht auch zu blöd angestellt.

Ich habe folgendes Konstrukt:

HTML: 
<div id="content"style="width:960px;">
   <div id="right_yellow" style="float:right;margin:0 10px 0 0; width:311px; background-color: yellow;">Text in rechter Spalte</div>
   <div id="left_green" style="float:left;margin:0 0 0 15px;width:610px; background-color: green;">Text in linker Spalte</div>
</div>

Je nachdem, wie viel Text jetzt in der jeweiligen Spalte steht, sind die divs dann entsprechend hoch und farbig ausgefüllt. Da die beiden Spalten aber dynamisch befüllt werden sollen, ist jetzt meine Frage: Wie schaffe ich es, dass beide "Seiten", sprich beide divs immer die komplette Größe des übergeordneten divs einnehmen? Sprich wird das linke div größer, passt sich auch das rechte dieser Größe an und ich habe unten immer einen sauberen Abschluss...

Vielen Dank für Eure Hilfe!
Stylesau
 
Sprich einfach nur eine Grafik, die die Hintergründe der einzelnen divs sozusagen "simuliert"? Hm, eigentlich einfach und sollte für mich auch problemlos funktionieren... aber das ist wirklich die einzige Lösung?

Danke auf jeden Fall! :D
 
Nein, display:table-cell wäre noch eine Lösung, aber das kann ein gewisser Browser in seiner Version 6 (oder sogar 7?) nicht, scheidet daher wohl aus.
 
Es gäbe auch die möglichkeit ein element absolute in einem relative positionierten element auf height:100%; zu setzen. Aber das kann auch ein gewisser Browser bei Versionen 5 und 6 nicht...


Loon3y
 
So, muss leider nochmal nerven. Zerbrech mir gerade den Kopf, aber ich weiß nicht, was da los ist. Habe jetzt folgendes Konstrukt

HTML: 
<div id="content" style="background:transparent url(bg.gif) repeat-y;">
  
  <div id="rightbox" style="float:right; width:200px;">
     <h2>blabla</h2>
     <p>blablabla</p>
  </div>
  
  <div id="leftbox" style="float:left; width:500px;">
      <div id="eins">
          <h2>blabla</h2>
          <p>blablabla</p>
      </div>
      <div id="zwei">
          <h2>blabla</h2>
          <p>blablabla</p>
          <img ... />
      </div>
   </div>

   <div style="clear:both"></div>

</div>
Im Firefox schien alles super, alles wunderschön. IE8 auch. Aber im IE 7 die komischsten Dinger. Mal hats gepasst, mal schien er die Grafik unter dem rechten div (rightbox) in der Ecke nicht mehr fertig zu rendern (?) können, mal auf beiden Seiten nicht, mal ein weißer Streifen zwischendrin. Dann im Firefox geschaut und wenn ich div2 weggelassen habe, hat er tatsächlich für die Berechnung der Größe nur div leftbox herangezogen.

Woran liegt das? Einfacher Grund, den ich nicht kenne, nicht sehe?

Danke Euch!
Stylesau
 
Ok, gelöst. Overflow:hidden für das content div macht alles gut... hab mir auch was zu overflow durchgelesen, aber irgendwie nicht richtig verstanden. Kann mir nochmal einer erklären in einfachen Worten, was overflow macht und wieso genau es mein Problem gelöst hat? Wills nur wirklich richtig kapieren... Danke!
 
Ich glaube, es wurde Link gesagt.

Im in einem Forum geposteten Quelltext kann man keine Webdeveloper-Tools laufen lassen.
Es gibt genug Freehoster, falls Dir ein Webspace fehlt.
 
Also... das Problem scheint behoben, auch wenn ich nicht wirklich nachvollziehen kann, woran genau es gelegen hat. Schon seltsam, aber irgendwo hats halt nicht gepasst. Werde mir wohl mal irgend ne Schrott Domain holen, da ich in nächster Zeit mehr ausprobieren will und bestimmt hier und da an meine Grenzen stoße, bin halt noch nicht so fit. Dann kann ich auch Links auf die Seiten posten ;-) Oder gibt es Free Hoster, die auch MySQL, PHP und PERL unterstützen?

Cheers,
Stylesau
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben