CSS Layout Problem

basiC · #1 (**permalink**) 17.03.2014, 19:45

Hallo Leute,

ich habe ein kleines Problem mit meinem CSS Layout. Ich habe bereits Stunden Google befragt und Dinge ausprobiert, bin aber nicht zu dem gewünschten Ergebnis gekommen. Vielleicht könnt ihr mit dabei helfen.

Aufbau: Ich habe einen Adminbereich aufgebaut, in dem es einen großen und zwei kleine Div-Bereiche geben soll. Der große Div Bereich soll den Inhalt enthalten und links sein. Die beiden kleinen sollen die Navigation und Hilfe enthalten, rechts und untereinander sein.

Problem: Ist die Höhe des Inhalt-Divs links kleiner als der oberer Div rechts, so rutscht der untere rechte Div hoch neben dem oberen kleinen Div. Bekomme es irgendwie nicht hin, dass der kleine untere div rechts bleibt.

Könnt ihr mir da weiterhelfen?

MFG
basiC

Thielo · #2 (**permalink**) 17.03.2014, 19:57

Dann zeig doch erstmal was du hast. Am besten lädst des hoch.

basiC · #3 (**permalink**) 18.03.2014, 12:03

Hier ist mein CSS Code. Für Profis sieht er vielleicht nicht so schön aus, arbeite mich aber gerade ein und das Ergebnis sah bislang auch wie gewünscht aus.

Code:

#ram {
    width: 1024px;
    margin: 0px auto;
}

#header {
    float: left;
    width: 1024px;
    border-bottom: 5px solid #ccc;
    height: 30px;
    border: 2px solid #FF7F00;
    border-radius: 10px;
    padding: 0px 0px 20px 0px;
    background-image: url('../images/carbon2.png');
    background-position: top center;
    color: #FF7F00
}

#navi {
    float: right;
    width: 700px;
    padding: 0px 0px 0px 0px;
    margin: 25px 0px 5px 0px;

}
        #navi li {
            font-size: 1.7em;
            display: inline;
        }

        #navi li a {
            padding: 17px 15px 0 10px;
            margin: 0 31px 0 0;
            color: #808080;
            border-left: 1px solid #E0E0E0;
        }

        #navi li a:hover {
            color: #FF7F00;
            border-left: 1px solid #FF7F00;
        }

#content {
    clear: both;
    float: left;
    width: 644px;
    min-height: 140px;
    padding: 15px 15px 15px 15px;
    margin: 15px 0 15px;
    border: 2px solid #FF7F00;
    border-radius: 10px;
    background: #EFEFEF;
}
        #content img {
            border: 1px solid #ccc;
            padding: 1px;
            float: left;
            margin: 0 15px 5px 0;
        }

#sidebar {
    top: 0px;
    margin: 15px 0px 0px 0px;
    padding: 15px;
    float: right;
    width: 300px;
    font-size: .9em;
    border: 2px solid #FF7F00;
    border-radius: 10px;
    background: #EFEFEF;

}
        #sidebar img {
            border: 1px solid #ccc;
            padding: 1px;
            margin: 0 0 8px;
        }

#help {
    float: right;
    top: 0px;
    margin: 15px 0px 0px 0px;
    padding: 15px;
    width: 300px;
    font-size: .9em;
    border: 2px solid #FF7F00;
    border-radius: 10px;
    background: #EFEFEF;
}

#footer {
    border-top: 1px solid #ccc;
    background: #fff;
    clear: both;
    width: 920px;
    margin: 10px auto 0;
    padding: 0px;
    font-size: .9em;
    color: #9b9b9b;
}

cloned · #4 (**permalink**) 18.03.2014, 12:16

CSS Code ohne den dazugehörigen HTML Code ist recht nutzlos.

K.Roland · #5 (**permalink**) 18.03.2014, 15:10

Zitat:

Zitat von basiC

Problem: Ist die Höhe des Inhalt-Divs links kleiner als der oberer Div rechts, so rutscht der untere rechte Div hoch neben dem oberen kleinen Div. Bekomme es irgendwie nicht hin, dass der kleine untere div rechts bleibt.

Das untere div rechts must du auch noch clearen.
__________
Roland

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS layout problem	donky	CSS	5	05.06.2009 16:56
Problem mit CSS Layout	jojoho	CSS	9	20.07.2008 22:16
layout mit css - problem	xxlcss	CSS	1	30.12.2005 02:25
problem ausrichtung grafik und rand (css layout)	celine@23	Barrierefreiheit	1	28.12.2005 13:05
includes bei css layout	dan	CSS	2	10.03.2004 18:21