Dynamische DIV Höhen-Anpassung

[challo]

Hallo,

hab zur Zeit eine kleine Denkblokade in meiner Div-Positionierung. Es handelt sich hierbei sicherlich um ein "Standard-100%-DIV-Height"-Problem^^

Zur Veranschaulichung des Problems:

Im Prinzip handelt es sich um ein einfaches 3-spaltiges Layout. In der Mitte soll der Inhalt stehen, die Höhe des content kann also veriieren. In den Ecken befinden sich Style-Elemente. An den beiden hohen Außenseiten werden die Style-Elemente mit einer Border verbunden.

Nun zum eigentlichen Problem. Das Div der Außenseiten (roter Pfeil) soll sich "dynamisch" mit dem content ändern.

Ich hab mich schon durch unzählige Foren gewühlt, aber bisher noch nichts passendes gefunden. Auch die Umbauideen für das Layout gehen mir langsam zur Neige. Drum bin ich für jeden geposteten Link dankbar :P

Danke schonmal im Vorraus für jeden Hinweis!

[ChrisB]

Hi,

Zur Veranschaulichung des Problems:

In den Ecken befinden sich Style-Elemente.

Was sollen „Style-Elemente“ sein?

Nun zum eigentlichen Problem. Das Div der Außenseiten (roter Pfeil) soll sich "dynamisch" mit dem content ändern.

Was soll „das Div der Außenseiten“ sein, und welche Problem hast du mit ihm?

Bitte drücke dich präziser aus.

MfG ChrisB

[challo]

Was sollen „Style-Elemente“ sein?

Irgendwelche Grafiken verpackt in ein Div mit den festen größen 170*82px;

Was soll „das Div der Außenseiten“ sein, und welche Problem hast du mit ihm?

Das Div außen ist 'design_left_middle' bzw. 'design_right_middle' und wie gesagt, soll dieses Div den Platz zwischen 'design_left_top' und '..._bottom' ausfüllen. Da sich aber 'content' in der Höhe ändern kann, kann ich den zuerst genannten Div ja keine fixe Höhe zuweisen.

Jo, hier kommt mal Code:

      .wrap{  
                         position:relative;  
  
                         width:1000px;  
                         }  
  
                 .content_holder{  
                         position:relative;  
  
                         width:660px;  
  
                         float:left;  
  
                         background-color:#FFFFFF;  
  
  
                         outline:1px solid rgb(31,26,23);  
                         }  
  
  
  
                 .design_left{  
                 	position:relative;  
  
                         float:left;  
  
                         width:170px;  
                         }  
                 .design_left_top{  
                 	position:relative;  
  
                 	height:86px;  
                         width:170px;  
  
                         background-image:url('images/design/left.png');  
                         background-repeat:no-repeat;  
                         }  
                 .design_left_middle{  
                         position:relative;  
  
                         width:170px;  
  
  
                         background-image:url('images/design/left_klein.png');  
                         background-repeat:repeat-y;  
                         background-position:right;  
                         }  
                 .design_left_bottom{  
                 	position:relative;  
  
                 	height:86px;  
                         width:170px;  
  
                         background-image:url('images/design/left_unten.png');  
                         background-repeat:no-repeat;  
                         }  
  
                 .design_right{  
                 	position:relative;  
  
                         float:right;  
  
                         width:170px;  
                         }  
                 .design_right_top{  
                         position:relative;  
  
                 	height:86px;  
                         width:170px;  
  
                         background-image:url('images/design/right.png');  
                         background-repeat:no-repeat;  
                         }  
                 .design_right_middle{  
                         position:relative;  
  
                         width:170px;  
  
                         background-image:url('images/design/right_klein.png');  
                         background-repeat:repeat-y;  
                         background-position:left;  
                         }  
                 .design_right_bottom{  
                 	position:relative;  
  
                 	height:86px;  
                         width:170px;  
  
                         background-image:url('images/design/right_unten.png');  
                         background-repeat:no-repeat;  
                         }

<div class="wrap">  
                         <div class="design_left">  
                                 <div class="design_left_top"></div>  
                                 <div class="design_left_middle"></div>  
                                 <div class="design_left_bottom"></div>  
                         </div>  
  
	        	<div class="content_holder">  
                                	<div class="content">  
                                          Inhalt  
                                 	                                                                            </div>  
                         </div>  
  
                         <div class="design_right">  
                                 <div class="design_right_top"></div>  
                                 <div class="design_right_middle"></div>  
                                 <div class="design_right_bottom"></div>  
                         </div>  
  
                         <div class="clearer"></div>  
                 </div>  

Bitte drücke dich präziser aus.

Richtig!