Nicht mehr ganz neu hier
Ich habe ein Problem mit verschachtelten Divs und weiß nicht mehr, wie ich das Ganze hinbekommen soll. Ich möchte ein Div bauen, dass drei weitere Divs enthält. Also quasi als Pseudocode erklärt:
<div id="rahmen">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
Da die Höhe von "box2" und "box3" unterschiedlich sein kann, die jeweils höhere Box aber die gesamte Höhe von "rahmen" bestimmen soll, klappt es nicht mit einer absoluten positionierung von "box1","box2" und "box3". Soweit ich mir das denke, müssen alle Boxen, also auch "rahmen", relativ positioniert werden. Ist das soweit richtig gedacht? :?:
Was das Ganze noch etwas komplizierter macht (zumindestens für mich), ist die Tatsache, dass "box1","box2" und "box3" nebeneinander dargestellt werden müssen (also float:left :?: ).
Mein bisheriger Code haut da leider nicht hin, zumal ich nicht weiß, was ich genau falsch mache:
"box1" und "box3" haben eine feste Breite, "box1" sogar eine feste Höhe, daher macht "box1" mir auch am wenigsten Probleme. Wie aber bekomme ich es hin, dass die Breite von "box2" (die mittlere box, die momentan eine feste Breite von 700 px enthält) dynamisch bestimmt wird? :?:
Was mich zudem verwirrt ist die Tatsache, dass der Rahmen, den ich im CSS in #content definiert habe nur oben angezeigt wird.
Ich wäre Euch für Eure Hilfe mal wieder sehr dankbar.
<div id="rahmen">
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</div>
Da die Höhe von "box2" und "box3" unterschiedlich sein kann, die jeweils höhere Box aber die gesamte Höhe von "rahmen" bestimmen soll, klappt es nicht mit einer absoluten positionierung von "box1","box2" und "box3". Soweit ich mir das denke, müssen alle Boxen, also auch "rahmen", relativ positioniert werden. Ist das soweit richtig gedacht? :?:
Was das Ganze noch etwas komplizierter macht (zumindestens für mich), ist die Tatsache, dass "box1","box2" und "box3" nebeneinander dargestellt werden müssen (also float:left :?: ).
Mein bisheriger Code haut da leider nicht hin, zumal ich nicht weiß, was ich genau falsch mache:
Code:
#content {
position:relative;
margin-top:25px;
background-color:#eeefed;
border:2px solid;
border-color:#a4ca9b;
clear:left;
}
#content_left {
position:relative;
width:137px;
height:200px;
margin-right:0px;
margin-top:0px;
float:left;
display:inline;
}
#content_center {
position:relative;
padding-left:25px;
padding-right:100px;
width:700px;
float:left;
}
#content_right {
position:relative;
width:137px;
margin-right:0px;
margin-top:0px;
float:left;
}
HTML:
<div id="content">
<!--linker Hauptbereich-->
<div id="content_left">
<img src="">
</div>
<!--mittlerer Hauptbereich-->
<div id="content_center">
<h3>TEXTBOX MITTE</h3>
<br>
TEXT
</div>
<!--rechter Hauptbereich-->
<div id="content_right">
<h3>TEXTBOX RECHTS</h3>
<br>
TEXT
</div>
</div>
Was mich zudem verwirrt ist die Tatsache, dass der Rahmen, den ich im CSS in #content definiert habe nur oben angezeigt wird.
Ich wäre Euch für Eure Hilfe mal wieder sehr dankbar.