✔ container (div) genauso hoch wie div im container

[Razorhawk]

Hallo,

ich habe das Problem, dass ich einen Container habe in dem ich die ganze Seite layouten möchte. Kein Problem. So habe ich Menu, Leftbar, Rightbar und Content als divs mit float usw. positioniert und für Testzwecke eine feste Höhe gegeben.

Ich war fertig und habe Testinhalt eingefügt in dem Content-Div. Dieser Text ist nun länger als als die vorher festgelegt div-höhe. Somit wird dann das Content-Div automatisch verlänger, aber das Container Div- welches das Content div umschließt wird nicht automatisch mit verlängert. Ich habe keiner Ahnung warum.

Ich habe dann alle höhenanganben der divs, die sich nach unten verlängern sollen auf 100% gestellt in der Hoffnung, dass das geht (html und body auch), aber es zerschießt mir alles...

kann sich das mal einer bitte anschauen und mit nen Tipp geben?
Ich schreibe mal den meiner Meinung anch relevanten CSS Code mit rein:

und hier der Link zur Seite:

http://razorhawk.de/psd-images/DesignPUC2.htm

<style type="text/css">
        
        html
        {
            height: 100%;
        }
        
        body
        {
            background-image: url(images/BG.gif);
            margin: 0 0 0 0;
            padding: 0 0 0 0;
            background-color: #999999;
            color: White;
            font-family: Verdana, Arial;
            font-size: 12px;
            font-variant: small-caps;
            height: 100%;
        }
        #container
        {
            background-image: url(images/containerBG.gif);
            background-repeat: no-repeat;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            padding: 0 36px 0 34px;
            width: 1004px;
            height: 100%;
            background-color: Gray;
        }
        #headerlinks
        {
            background-image: url(images/headerlinksBG.gif);
            width: 1003px;
            height: 48px;
            background-color: #999999;
        }
        #header
        {
            width: 790px;
            height: 208px;
            background-color: #731a13;
            float: left;
        }
        #websitetitle
        {
            background-image: url(images/websitetitleBG.png);
            background-color: #731a13;
            width: 790px;
            height: 65px;
            padding: 7px 0 5px 40px;
        }
        /* Begin Top Menu */#menu
        {
            background-image: url(images/menuBG.gif);
            background-color: #834643;
            background-position: 0 0px;
            width: 790px;
            height: 131px;
        }
        
        #rightbar
        {
            background-image: url(images/rightbarBG.gif);
            background-position: 0px 392px;
            width: 213px;
            height: 100%;

            background-color: #822b22;
            float: right;
            border: solid 1px #c23838;
            border-bottom: none;
            border-left: none 0;
        }
        #seductionpic
        {
            background-image: url(images/woman02.jpg);
            width: 212px;
            height: 391px;
            background-color: #c33937;
            border-bottom: solid 1px #c23838;
        }
        #rightbarcontent
        {
            width: 211px;
            height: 100%;
            border-left: solid 1px #c23838;
        }
        #leftbar
        {
            background-image: url(images/leftbarBG.gif);
            background-color: #812a21;
            
            height: 100%;
            width: 189px;
            float: left;
            border: solid 1px #c23838;
            border-bottom: none 0 black;
            border-top: none 0px;
            padding-top: 8px;
        }
        /*  Begin Content */#content
        {
            background-image: url(images/contentBG.gif);
            float: right;
            width: 569px;
            height: 100%;
            background-color: #912c22;
            border-bottom: none 0px #c23838;
            padding: 20px 10px 20px 20px;
            text-align: justify;
            color: #efefef;
            font-size: 11px;
            text-indent: 0px;
            
        }
       
        .overflow
        {
            padding-right: 7px;
            height: 100%
           
        }
        /*End Content */#footer
        {
            background-image: url(images/footerBG.gif);
            background-position: -4px 0px;
            height: 154px;
            width: 1074px;
            margin-left: auto;
            margin-right: auto;
        }

 

[Maik]

Hi,

wenn ich die height:100%-Deklaration für die DIVs #container, #rightbar, #rightbarcontent, #leftbar, #content, #overflow aus dem Stylesheet entferne und stattdessen die Floatumgebung zum Abschluss "cleare", umschliesst das DIV #container seinen Inhalt in voller Höhe:

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

<div id="container" class="clearfix"> ... </div>

Siehe hierzu http://positioniseverything.net/easyclearing.html.

 

[Razorhawk]

Danke dir!

Das hat das Problem fast gelöst.

Jetzt habe ich nur das Problem, dass der umschließende Container immer sich dem längsten Div-Block anpasst. Aber diejenigen welcher kleiner sind passen sich dennoch nicht an und bleiben in ihrer minimalen Größe (bei null Inhalt dann halt auf Höhe 0)

Gibs dafür noch eine Lösung? Mit height gehts natürlich dann nicht.

Ich habe es erst einmal anders gelöst, was aber meiner Seite speziell angepasst ist (und somit keinem anderen weiterhilft)

Gruß
Razorhawk

 

[Maik]

Möglicherweise hilft dir da die Fauxcolumns-Technik weiter.

 

[Razorhawk]

Hah ich schmeiß mich weg.

Die andere Lösung, welche ich gefunden habe entspricht genau dem Prinzip des Artikels den du mir gegeben hast. Gut zu wissen, dass ich die richtige Idee hatte

Danke für den Link!

Damit ist dann wohl das Thema erledigt und gelöst.