Jens Kopf: Die Höhen 3er divs.

Moin! :-)

Nach 3 Tagen Googeln, Forumsarchiv lesen und anderem weiß ich nicht mehr weiter und wende mich an Euch.

Auf einer Seite befinden sich nebeneinander 2 div-Container ( mit float:left erreicht ) und diese 2 div-Bereiche wiederum sind in einem übergeordeneten div-Container.

Was ich will ist, daß _alle 3_ Container _immer_ sowohl oben als auch unten bis zum Bildschirmrand gehen. Auch, wenn wenig Inhalt in einem der beiden divs liegt.

#################################################
#        #########        #########             #
#        #       #        #       #             #
#        # div   #        # div   #  div clas=  #
#        # class #        # class #  div1       #
#        # =     #        # =     #             #
#        # div2  #        # div3  #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #       #        #       #             #
#        #########        #########             #
#################################################

Beim Erstellen der css-datei mit height-Angabe, min-height-Angabe, height:auto, etc. schaffe ich es einfach nicht, daß alle 3 div Container immer bis zum unteren Bildschirmrand reichen. Und _wenn_ es mir gelingt, dann hört der div im Firefox auf, wenn mher Text darin ist.

Ich wäre dankbar, wenn wer mein Problem versteht und mir weiterhelfen könnte. Sowohl im Firefox, als auch im Opera und im IE sollen _alle_ 3 div-Container so lange sein, wie der mit dem meisten Inhalt, _zumindest_ aber die 100% des Bildschirmes ausfüllen.

Danke im Voraus!

Liebe Grüße

Jens

  1. Hallo Jens,

    [...]

    haben die divs eine feste Breite?

    Viele Grüße,
    Marc.

    --
    Und immer schön
    validieren (http://validator.w3.org/)
    1. Hi Marc!

      haben die divs eine feste Breite?

      Ja, haben Sie. ( mit em angegeben für ein flexibles Layout. )

      LG

      Jens

      1. Hallo zusammen,

        haben die divs eine feste Breite?

        Ja, haben Sie. ( mit em angegeben für ein flexibles Layout. )

        Das kann natürlich Sinn machen. Aber dann funktioniert mein Pfusch nicht...

        Ich kenne keine Lösung für das Problem. Es ist schon ein wenig Tricksen nötig, um die Spalten alle gleich lang zu bekommen (mehrere clear:left/both/right waren dafür nötig...)

        Mein "Pfusch" zielt darauf ab, dass es oft genügt, wenn es aussieht, als gingen die Spalten über die ganze Höhe. Das mache ich dann mit sher schznell und schmutzig mit einem background-img für den gesamten body. Aber da man keine relativen Größenangaben für das Hintergrundbild machen kann, hilft Dir das bei flexiblen Layouts nichts...

        Viele Grüße,
        Marc.

        --
        Und immer schön
        validieren (http://validator.w3.org/)
  2. Was ich will ist, daß _alle 3_ Container _immer_ sowohl oben als auch unten bis zum Bildschirmrand gehen. Auch, wenn wenig Inhalt in einem der beiden divs liegt.

    Hallo Jens,

    google mal nach "Faux Columns". Evtl. ist das eine Lösung.

    Best wishes, imho_tep

  3. hi,

    probiermal dass denn:

      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
      
    <html>  
    <head>  
    <title>3 columns, fixed width, content tallest</title>  
    <style type="text/css">  
    #container{  
     background-color:#9cc;  
     float:left;  
     width:500px;  
     border-left:150px solid #cf9; /* The width and color of the left rail */  
     border-right:200px solid #c33; /* The width and color of the right rail */  
    }  
    #leftRail{  
     float:left;  
     width:150px;  
     margin-left:-150px;  
     position:relative;  
    }  
    #center{  
     float:left;  
     width:500px;  
     margin-right:-500px;  
    }  
    #rightRail{  
     float:right;  
     width:200px;  
     margin-right:-200px;  
     position:relative;  
    }  
    </style>  
    </head>  
    <body>  
    <p>source: http://alistapart.com/articles/multicolumnlayouts</p>  
     <div style="width:850px;margin:0 auto">  
     <div id="container">  
      <div id="center">CENTER<br />COLUMN CONTENT</div>  
      <div id="leftRail"><p>LEFT RAIL</p><p>LEFT RAIL</p><p>LEFT RAIL</p><p>LEFT RAIL</p></div>  
      <div id="rightRail">  
        <p>RIGHT RAIL</p>  
      </div>  
     </div>  
     </div>  
    </body>  
    </html>