Automatische Höhe in div tags

[Werner97]

Hallo,
arbeite erst seit kurzem mit css und div tags. Klappt ganz gut, nur ein kleines Problem habe ich.
Ich habe für meinen Body einen "Main" div-tag erstellt, der dann nochmals "mainleft" und "mainright" enthält - quasi zwei unabhängige Spalten.
Ich habe nun das Problem, die Höhe so hinzukriegen, dass das auf beiden Seiten dynamisch läuft, aber sich eben an den main-tag hält. Wenn ich überall eine fixe Höhe angebe funktioniert das einigermaßen, ist ja aber nicht Sinn der Sache.
Ich möchte quasi, dass mainleft und mainright untergeordnet sind und genau so groß werden, dass sie im (Hauptfeld) main-tag perfekt integriert werden. Leider inde ich nirgendwo Tutorials, zumindest kam ich nicht weiter. Wäre toll, wenn mir jemand helfen könnte.

[Zer0]

Wie wäre es mit der Idee, dass du mal ein wenig Quelltext postet, sonst kann dir keiner mitteilen, wo bei dir der Wurm drin ist ;-)

[Werner97]

Ja ja, schon gut

<div id="main">
<div id="mainright">
....inhalt
<div id="mainleft">
....inhalt

</div>
</div>
<div id="foot">

float left und float right habe ich im Dreamweaver-Entwurf für mainleft und mainright angelegt Die beiden div tags (mainleft und mainright) sind schön nebeneinander im main-tag
Der foot div-tag schließt direkt an den main-tag an, funktioniert auch, lediglich die main-tags weißen nicht die gleiche Höhe auf, es sei denn ich definiere sie genau.

Wenn ich z.B. mainleft und mainright eine Höhe von 300 fest zuweise und dem container main 310 (habe bei mainleft und right jeweils oben und unten 5 px padding) dann passt das genau und sieht auch in jedem Browser gut aus. Ich wollte aber eben, dass das dynamisch verläuft und sich je nach der Höhe eines div tags automatisch anpasst.

Ich weiß, dass ich das mit "float" und "clear" hinkriege, aber leider weiß ich nicht wie.

Edit: mit <p style="clear:both;">
unter den "inneren" tags habe ich es nun fast hingekriegt
Der main divtag passt sich an. Sieht im Entwurf zwar nicht so aus, aber in der Live-Ansicht und bei allen Browsern funktioniert es. Lediglich der gewählte Hintergrund im rechten Tag läuft nicht bis ganz unten, obwohl unter Hintergrund "repeat" ausgewählt ist. Ist der eingeschlagene Weg richtig?

[Werner97]

Hier noch die Codes der div-tags:

#main {
width: 1000px;
border-top-width: thin;
border-right-width: medium;
border-left-width: medium;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
background-color: #FFF;
margin-right: auto;
margin-left: auto;
}
#mainright {
background-color: #FFF;
float: right;
width: 663px;
background-image: url(gif/background.gif);
border-left-width: 1px;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
border-top-width: 0px;
margin-top: auto;
margin-bottom: auto;
padding: 5px;
background-repeat: repeat;
}
#mainleft {
font-family: Arial, Helvetica, sans-serif;
background-image: url(jpg/background2.jpg);
background-repeat: repeat;
float: left;
width: 316px;
padding: 5px;
clear: none;

[wildmieze]

Ist Dein Ziel, daß beide divs immer gleich lang sind, auch wenn in dem einen mehr Text ist als in dem anderen? Das ist so ohne weiteres nur mit HTML und CSS nicht möglich - ABER: in der Regel reicht es, wenn beide divs gleich hoch _aussehen_. Dafür nutzt man dann "faux columns". Spontan ergoggeltes Beispiel: http://www.ohne-css.gehts-gar.net/0005.php

[Werner97]

Ja, genau das ist mein Ziel. Wenn ich in der kürzeren Seite so lange "Enter" drücke, bis sie in etwa gleich lang sind funktioniert das auch halbwegs, aber das ist halt nicht unbedingt die schönste Lösung. Ich google mal nach faux columns - vielen Dank