CSS: div-Höhe übernehmen

[Juro]

Hi,
Ich weiss, daß ein ähnlicher Thread gerade aufgemacht wurde, mein Problem ist aber ein anderes.

Ich habe folgende Seitenstruktur (kommt von einem Mambo-CMS:

<div id="total">
  <div id="title">
    <?php mosLoadModules( 'top' ); ?>
  </div>
  <div id="left">
    <?php mosLoadModules ( 'left' ); ?>
  </div>
  <div id="main"><?php mosMainBody(); ?></div>
  <div id="bottomline"><?php include_once('includes/footer.php'); ?></div>
</div>

und folgendes CSS:

div#total {
  position:	        absolute;
  top:              50px;
  left:             50px;
  background-color: #edd185;
}  

div#title {
    width:	900px;
    height:	123px;
    background-image: url('../images/header.jpg');
    z-index: 1;
}

div#main {
  position          :	absolute;
  top               : 138px;
  left              : 245px;
  width             :	655px;
  background-color  : #edd185;
  z-index           : 1;
}

div#left {
	position          :	absolute;
	top               : 138px;
	left              :   0px;
	width             :	230px;
	height            : 100%;
	background-color  : #edd185;
}

div#bottomline {
	position          : relative;
	left              : 245px;
	width             :	655px;
	height            : 142px;
  background-color  : #edd185;
  text-align        : center;
  padding           :  10px;
  z-index           : 2;
}

Jetzt würde ich gerne die Höhe des div#left an die des div#main Elementes anpasst. Meine Überlegung ist folgende:

Wenn sich div#main an den Inhalt anpasst und größer wird, so muss auch das Eltern-Element div#total größer werden (automatisch). Jetzt muss ich div+left nur noch "sagen", daß es die komplette Höhe des div#total Elementes verwenden soll. Das dachte ich mache ich mit "height=100%", nur leider geht das nicht.

Geht das überhaupt?

lg
juro

[jak]

Ich weiß Tabellen sind pfui, aber in solchen Fällen sehr praktisch .

lg,
jak

[Juro]

Danke für dieses äusserst hilfreiche aber vollkommen unötige Kommentar.

[jak]

Wieso? Was spricht dagegen die Grundstruktur der Seite als Tabelle zu realisieren?

Falls du Firefox verwendest installiere die Web Developer Extension (falls die nicht eh bereits installiert ist. Die Punkte unter 'Outline' dürften dich interessieren, vor allem 'outline block level elements'.

Falls nicht:
1.) Kannst du in dein Stylesheet bei div#left noch border:1px solid red; einfügen, dann siehst du wie groß dein div ist.
2.) Solltest du Firefox und die oben genannte Extension installieren. Ist extrem nützlich.

Generell:
Kannst du mal versuchen position:absolute bei div#main und div#left abzustellen.

jak

[Juro]

Ok, danke - das war schon hilfreicher

[snowman]

http://www.positioniseverything.net/articles/jello.html

gruss,
snowman

[jak]

<p mode="off_topic">
Ich verstehe durchaus den Standpunkt das Tabellen nicht fürs Layout gedacht sind. Aber wenn ich mich entscheiden kann zwischen einem simplen, funktionierenden Tabellenlayout und einem <div> Layout bei dem ich mindestens eine Stunde damit verbringe mich darüber zu ärgern das der IE genau die Dinge die ich brauche nicht oder falsch unterstützt ist meine Entscheidung klar.

With old-school table layout methods, vertical positioning is a piece of cake. With CSS layout, it’s a piece of something else.

Quelle: http://alistapart.com/topics/code/css/ Anrisstext für den Arttikel "Exploring Footers".
Anderer Zusammenhang, aber immer noch wahr:

... we hand-coders often pride ourselves, not on the quality of our work but instead on our arcane knowledge of which non-standard tag or snippet of JavaScript “fixes” which rendering problem in which stupid browser.

quelle: http://www.alistapart.com/articles/journey
</p>
<p mode="on_topic"> Vor allem position:absolute ist in allen Browsern immer wieder für Überraschungen gut. Oft (leider bei weitem nicht immer) hilft es einen <div style="position:absolute">Um den div herumzugeben den man eigentlich positionieren möchte.
Ich verwende fast immer eine Tabelle als Grundstruktur (Header, oberes Menü, linkes menü, content, footer) und positioniere den Rest dann mit <div>s o.ä.</p>

jak