✔ Mein kleines Tabellenlayout nach CSS portieren

pigafakefl · 8. März 2010

Ich bin kein absoluter Neuling in Sachen CSS, aber eine Sache nervt mich, die ich einfach nicht begreife. Es geht um die Vererbeung von Eltern/Kind Informationen.

Folgendes Layout als Tabellenlayout

HTML:

<div align="left">
  <table border="0" width="1350" cellpadding="0" cellspacing="0" height="100%">
    <tr>
      <td width="300" valign="top" bgcolor="#008000">&nbsp;</td>
      <td width="850" valign="top" bgcolor="#FFFF00">&nbsp;</td>
      <td width="200" valign="top">
        <div align="center">
          <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%">
            <tr>
              <td width="100%" bgcolor="#808000" height="200" valign="top">&nbsp;</td>
            </tr>
            <tr>
              <td width="100%" height="150" valign="top"></td>
            </tr>
            <tr>
              <td width="100%" bgcolor="#000080" valign="top" height="100%">&nbsp;</td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
</div>

Ganz speziell geht es um den blauen Bereich rechts unten. Dieser soll nach unten immer länger werden, wenn im gelben Bereich der Content länger wird. Wenn man es sich im Browser ansieht so endet alles unten bündig. So soll also das CSS-Ergebnis auch aussehen.

Ich also mal wieder mit CSS versucht:

HTML:

<div style="width:1350px; height:100%;">
	<div style="width:300px; background-color:green; float:left; height:100%;"></div>
	<div style="width:850px; background-color:yellow; float:left; height:100%;"></div>
	<div style="width:200px; float:left; height:100%;">
		<div style="width:100%; height:100%;">
			<div style="width:100%; height:200px;background-color:#808000;"></div>
			<div style="width:100%; height:150px;background-color:#FFFFFF;"></div>
			<div style="width:100%; height:100%;background-color:#000080;"></div>
		</div>
	</div>
</div>

Ich kann halt nicht erklären, warum dies auftritt. Ich vermute mal wegen dem floaten der drei Dinger nebeneinander. Wenn man es sich im Browser ansieht, dann ist der blaue Bereich das Problem. Dieser ist nicht bündig unten ohne Content. Wenn man nun in den gelben Bereich viel Content einfließen lässt, so wäre das Ziel, dass der grüne und gelbe Bereich und auch der blaue Bereich rechts mit nach unten geht und zum Schluß bündig abschließt. Mir fehlt die Vorstellungskraft, die man bei CSS und so einem KOnstrukt benötigt, um das hinzubekommen.

Wer kann mal bei mir den Lichtschalter anschalten. Danke.

Maik · 8. März 2010

Hi,

der Artikel AnyColumnLongest zeigt dir unterschiedliche Lösungsansätze auf, um die Höhe der Spaltenblöcke unabhängig von ihrem Inhalt anzugleichen.

Die von dir deklarierten height:100%-Regeln bewirken da nämlich herzlich wenig, weil sich diese Angabe auf die komplette Fensterhöhe des Browsers bezieht, was schlußendlich den vertikalen Versatz zwischen dem gelben und blauen Block zur Folge hat, da Letzterer gegenüber Ersterem im Viewport 350px tiefer beginnt.

mfg Maik

pigafakefl · 8. März 2010

Maik hat gesagt.:
Hi,
Die von dir deklarierten height:100%-Regeln bewirken da nämlich herzlich wenig.

Wie man sieht, ist das so, ja

Maik · 8. März 2010

Meinen Nachtrag (Nebensatz) hab ich wohl einen Moment zu spät reingestellt.

Maik hat gesagt.:
Die von dir deklarierten height:100%-Regeln bewirken da nämlich herzlich wenig, weil sich diese Angabe auf die komplette Fensterhöhe des Browsers bezieht, was schlußendlich den vertikalen Versatz zwischen dem gelben und blauen Block zur Folge hat, da Letzterer gegenüber Ersterem im Viewport 350px tiefer beginnt.

mfg Maik

pigafakefl · 8. März 2010

Im Firefox und Safari geht dies hier. Aber mal wieder nicht im IE. Hat jemand eine Glaskugel und kann die mal befragen.

HTML:

<style type="text/css">
<!--

body { margin:0px;}
#wrapper { width:1450px; overflow:hidden; margin:0 0; min-height:100%; }

#block_1 { float: left; width: 300px; background-color:red; padding-bottom: 10000px; margin-bottom: -10000px; }
#block_2 { float: left; width: 850px; background-color:yellow; padding-bottom: 10000px; margin-bottom: -10000px; }
#block_3 { float: left; width: 200px; padding-bottom: 10000px; margin-bottom: -10000px; }

#block_3_a { height: 200px; background-color:green;}
#block_3_b { height: 200px;}
#block_3_c { height: 600px; background-color:blue;}

-->
</style> 



<div id="wrapper">
<div id="block_1">
	dfghdfghdfg<br><br><br>dfghdfghdfg<br><br><br>dfghdfghdfg<br><br><br>dfghdfghdfg<br
</div>
<div id="block_2">
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
</div>
<div id="block_3">
    <div id="block_3_a"></div>
    <div id="block_3_b"></div>
    <div id="block_3_c"></div>
</div>
</div>

Maik · 8. März 2010

Fällt dir in dieser Zeile nichts auf?

HTML:

dfghdfghdfg<br><br><br>dfghdfghdfg<br><br><br>dfghdfghdfg<br><br><br>dfghdfghdfg<br

mfg Maik

pigafakefl · 8. März 2010

Yo. Danke. Aber leider klappt das Teil immer noch nicht. Habe gerade festgestellt, dass die blaue Box immer noch nicht nach unten mit zieht. Und wenn ich %-height angebe, verschwindet der gesamte rechte Bereich.
Ich bin zu blöd für dieses CSS. Wir werden nie Freunde

Maik · 8. März 2010

Wie hast du denn den Hintergrund für die beiden vorangegangenen Spaltenblöcke #block_1 und #block_2 geregelt?

Na, siehste

CSS:

#block_3 { float: left; width: 200px; padding-bottom: 10000px; margin-bottom: -10000px; background-color:blue; }

#block_3_a { height: 200px; background-color:green;}
#block_3_b { height: 200px; background-color:white;}
#block_3_c {  /*height:600px;*/ /*background-color:blue;*/ }

mfg Maik

pigafakefl · 8. März 2010

Jetzt verwirrst du mich noch mehr

. Auch wenn ich die Sache mit diesem Trick nicht so super finde. Aber wenns schön macht:

HTML:

<style type="text/css">
<!--

body { margin:0px;}
#wrapper { width:1450px; overflow:hidden; margin:0 0; min-height:100%; }

#block_1 { float: left; width: 300px; background-color:red; padding-bottom: 10000px; margin-bottom: -10000px; }
#block_2 { float: left; width: 850px; background-color:yellow; padding-bottom: 10000px; margin-bottom: -10000px; }
#block_3 { float: left; width: 200px; }

#block_3_a { height: 200px; background-color:green;}
#block_3_b { height: 200px;}
#block_3_c { min-height: 600px; background-color:blue; padding-bottom: 10000px; margin-bottom: -10000px;}

-->
</style> 



<div id="wrapper">
<div id="block_1">
	dfghdfghdfg<br><br><br>dfghdfghdfg<br><br><br>dfghdfghdfg<br><br><br>dfghdfghdfg<br>
</div>
<div id="block_2">
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
	3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>3452345234524<br>
</div>
<div id="block_3">
    <div id="block_3_a"></div>
    <div id="block_3_b"></div>
    <div id="block_3_c"></div>
</div>
</div>

Maik · 8. März 2010

Was ist an meinem Lösungsvorschlag verwirrend, den ich lediglich aus deiner Quellcode-Vorgabe abgeleitet habe?

Er funktioniert erwartungsgemäß störungsfrei, wie auch zuvor bei den anderen beiden Blöcken #block_1 und #block_2.

Wenn dir dieser Trick nicht zusagt, stehen dir doch alternative Techniken zur freien Auswahl, um die Spaltenhöhen anzugleichen

Ansonsten wird ohne sie ein HTML-Element vom Browser nur so hoch dargestellt, wie es der Inhalt von ihm abverlangt, und eine automatische Höhenanpassung der benachbarten Elemente findet nicht statt.

mfg Maik

✔ Mein kleines Tabellenlayout nach CSS portieren

pigafakefl

Grünschnabel

Maik

pigafakefl

Grünschnabel

Maik

pigafakefl

Grünschnabel

Maik

pigafakefl

Grünschnabel

Maik

pigafakefl

Grünschnabel

Maik

Neue Beiträge