✔ DIV Container ragt über parent hinaus

[_voodoo]

Hallo,
ich versuch grad eine klassische Website mittels DIV Containern
zu erstellen, aber die Sache will nicht so wie ich mir das wünsche.
Lange Rede kurzer Sinn, am besten ihr schaut euch das an:
--> http://www.christophradtke.com/blaugrau
Am unteren Ende ragt der items-div halt so drüber und ich versteh
einfach nicht wieso... müsste er nicht eigentlich die drüber liegenden
Container automatisch ausdehnen..

Ich fänds super wenn jmd. kurz drüber schaut mir hilft.

Danke!

 

[Sven Mintel]

müsste er nicht eigentlich die drüber liegenden
Container automatisch ausdehnen..

Naja, der Elterncontainer hat eine Höhenangabe, warum sollte er die ignorieren?

Versuche das Design ohne eine Höhenangabe für diesen Elterncontainer umzusetzen, dann sollte es wie gewünscht gehen

 

[Maik]

Hi,

da kommt so einiges zusammen, dass der Inhalt die Box "überlappt":

1. Die height:100%-Deklarationen werden von den standardkonformen Browsern als fixe Höhe behandelt.
2. Die Floatumgebung muß zum Schluß mit der clear-Eigenschaft aufgehoben werden, um im Dokument wieder den normalen Textfluß herzustellen.
3. Die relative Startposition von oben, nimmt die Box aus dem normalen Textfluß.

<div id="main">
        <div id="top">
                <div style="/*position: relative; top: 80px;*/margin-left: 25px; width: 420px;" class="clearfix">

div#main {
        position: absolute;
        left: 200px;
        top: 0px;
        width: 470px;
        min-height:100%; /* Mindesthöhe in modernen Browsern */
       /*height: 100%;*/
        background: url("http://www.tutorials.de/forum/images/main_bg.png") repeat-y;
}

* html div#main { height:100%; } /* Mindesthöhe in IE<7 */

div#top {
        width: 470px;
        padding-top:80px;
        /*height: 100%;*/
        background: url("http://www.tutorials.de/forum/images/main_bg_top.png") no-repeat;
}

div#items {
        background: #323232;
        width: 320px;
        /*height: 100%;*/
        float: right;
        border-left: 1px solid #cc0033;
        margin-bottom: 10px;
}

.clearfix:after {
content:".";
display:block;
height:0;
font-size: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 */

mfg Maik

 

[_voodoo]

Vielen Dank für die schnelle Antwort.

Das schaut nach Lesearbeit aus, ich will ja schließlich verstehen was ich da kopiert habe.

 

[Maik]

Ich hab meine Antwort kurz vor deinem Post editiert, und die drei Ursachen erläutert

mfg Maik