Wie kann man diese Divs so anordnen?

html.de-Forum HTML, XHTML & CSS
1

Hallo zusammen,

Mein Problem besteht darin, dass ich gerne einen fixen Abstand zwischen 2 divs hätte. Es geht um die beiden divs dialog_container + footer.

Dort sollen immer 20px dazwischen als Abstand sein, egal was für ein Inhalt oben eingefügt wird.

Leider funktioniert es nicht wie gewünscht.

P.S Wenn ihr den Code ausprobieren wollt, müsst ihr die beiden Dateien in dem Ordner „libs“ öffnen.

Hier ein kleines Beispiel:

  1. So sollte es aussehen, auch wenn oben ein div höher eingestellt wird

  2. So sollte es nicht aussehen - die 20px sind nicht mehr dazwischen.

Danke schon im voraus für eure Hilfe. Habe daran nun 4h verbraucht :D.

[ATTACH]1860.vB[/ATTACH]

HTML-Code:

[HTML]

PositionLog
logo
adsense
test
test
test
test
www.google.com
[/HTML]

CSS_Code:


@charset "ISO-8859-1";
/* CSS Document - CSS_mitLogin.css */

body {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #000000;
    direction: ltr;
    font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
    font-size: 0.7em;
    margin: 0;
    padding: 0;
    text-align: left;
    unicode-bidi: normal;
}

/*----------------------/
/ Font Formatierungen   /
/----------------------*/

.a {
        cursor: pointer;
}

#footer_list a:hover {
        text-decoration: underline;      
}

/*----------------------/
/ DIV Formatierungen    /
/----------------------*/

#global_site {
        margin: 0 auto;
        background-color:#FFF;
}

#title_bar_up {
        margin: 0 auto;
        width: 960px;
        height: 10px;
        background-color:#FFF;
}

#title_bar {
        margin: 0 auto;
        height: 35px;
        width: 960px;
        background-color: #6F6;
}

#logo {
            height: 35px;
        width: 150px;
        background-color:#752;
            float: left;
}

#navi_container {
        margin: 0;
        height: 35px;
        width: 810px;
        background-color:#06F;
        float: right;
}

#welcome {
        margin: 0;
        height: 35px;
        width: 200px;
        background-color:#422;
            float: left;
}

#logout {
        margin: 0px;
        height: 35px;
        width: 0px;
        background-color:#422;
            float: left;
}

#logout ul, #logout li {
        float: right;
        display:block;
        list-style-type: none;
        margin: 0;
        padding: 0;
}

#navi_list {
        margin: 0px;
        padding: 0px;
        float: right;
}

#navi_list ul, #navi_list li {
        float: left;
        display:block;
        list-style-type: none;
        margin: 0;
        padding: 0;
}

#navi_list li {

}
#navi_list a, #logout a {
        color: #FFFFFF;
        font-weight: bold;
        height: 26px;
        display: inline-block;
        text-decoration: none;
        background-color: green;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 9px;
}

#navi_list a:hover, #logout a:hover {
        background-color:black; 
        text-decoration:none;
}

#white_bar {
        margin: 0 auto;
        height: 20px;
        width: 960px;
        background-color: #CFC;
}

#dialog_container {
        padding-bottom: 20px;
        margin: 0 auto;
        width: 960px;
        background-color: #CFC;
}

#main_container {
        width: 780px;
        background-color: #CFC;;
}

#profile {
        height: 600px;
        width: 740px;
        background-color:#3F6;
        margin-left: 20px;
}

#profile_n {
        height: 25px;
        width: 740px;
        background-color: #6F6;

}

#profile_a {
        height: 150px;
        width: 740px;
        background-color: #FFFF99;
}

#profile_i {
        height: 150px;
        width: 740px;
        background-color: #FFCC00;       
}

#profile_b {
        height: 290px;
        width: 740px;
        background-color: #33CC66;
}

#adsense {
        margin-right: 20px;
        width: 160px;
        height: 615px;
        background-color:#FCC;
        float: right;
}

#footer {
        margin: 0 auto;
        height: 60px;
        width: 960px;
        background-color: #C60;
}

#footer_links {
        margin-top: 10px;
        margin-right: 10px;
        height: 40px;
        width: 760px;
        background-color: #3F6;
        float: right;
}

#footer_list {
        margin: 0;
        padding: 0;
        float: right;
}

#footer_list ul, #footer_list li {
        display: inline;
        list-style-type: none;
        margin: 0;
        padding: 0;
}

#footer_list li {
        margin-right: 15px;
}

#footer_list a {
        height: 28px;
        display: inline-block;
        text-decoration: none;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 12px;
}

#copyright {
        margin-top: 12px;
        margin-left: 15px;
}

/*-----------------------/
/ Diverse Formatierungen /
/-----------------------*/

.clear {
        clear: both;
}

.r_float {
        float: right;
}

.l_float {
        float: left;
}

.clear {
        clear: both;
}
2

einfach dem element welches den abstand hat ein margin bottom geben. Oder ein margin top. eines von beiden evtl eine eigene klasse machen oder einfach alle elemente welche die benötigen zusammen fügen.

3

Habe ich schon probiert - leider hat es nicht funktioniert.

Sobald ich ein Div oben höher gemacht habe, ist der Abstand wieder verschwunden … :frowning:

4

geht immer ncoh net … :frowning:
falscher Alarm

habe eine Spur … :slight_smile:

overflow-Befehl hilft da vielleicht.

5

ah jetzt hab ich erst begriffen was du genau möchtest.

ja wenn du den abstand so beibehalten möchtest dann musst du das mit overflow: scroll ; lösen dann hast du allerdings den hässlichen scrollbalken im container.