Probleme mit Div Container

[K0RN]

Hallo,
mein Problem ist Folgendes..

Meine Website besteht auf mehreren Div Containern ua. einer Namen Main in dem Main-Container befinden sich zwei weitere Container Namens Main-Left und Main-Right nun ist mein problem wie folgt.. Wenn ich in der Main-Right text einfüge so das er ueber die Min-height von Main kommt, geht er ueber den Main-Content anstatt ihn in die länge zu ziehen wie ich es eigentlich wollte..

Wichtig! Was man eventuell auch noch erwähnen sollte der hintergrund ist aus 2 Teilen zusammen gesetzt.

Hier sind die Bestandteile der Style.css die etwas damit zu tuen haben könnten:

/**Containter Gesamt**/

#root
{
    width:995px;
    min-height:928px;
    background-color:#f7f7f7;
    position:relative;
    margin: 0 auto;
}

/**Main Content**/

#main
{
    width:995px;
    min-height: 687px;

}

#main_bg_center
{
    width:995px;
    min-height: 682px;
    background-image:url(design-img/main_bg_center.jpg);
}

#main_bg_down
{
    width:995px;
    height:5px;
    background-image:url(design-img/main_bg_down.jpg);
}

/**Main left**/

#main_left
{
    width:326px;
    height:100%;
    float:left;
}

/**main_right**/

#main_right
{
    width:660px;
    min-height:600px;
    float:right;
}

Ich hoffe ihr könnt mir helfen, und ich bedanke mich schoneinmal im vorhinaus..

MfG K0RN

 

[threadi]

Wie sieht der HTML-Code dazu aus?

 

[K0RN]

Hier der dazugehörige HTML Code ohne inhalte..

<div id="main">
        
    <div id="main_bg_center">


        <div id="main_left">
    
        </div><!--main_left-->
    
    
    <div id="main_right">
    
    </div><!--main_right-->

    
    </div><!--main_bg_center-->

<div id="main_bg_down"></div>
        
        </div><!--main-->

MfG

 

[threadi]

Da Du #main_left und #main_right floatest, erhält das umgebende Element keine Höhe mehr. Du musst die CSS-Eigenschaft clear verwenden um das floaten zu beenden und dem umgebenden Element dadurch eine Höhe zu geben.

Die Frage kommt immer wieder. Zuletzt habe ich sie hier beantwortet. Weitere Antworten findest Du über die Forensuche.

Moderation: Verschoben von HTML zu CSS.

 

[djheke]

float:left oder overflow:hidden für #main sollte auch funktionieren.

 

[K0RN]

Hallo,
nun habe ich den das mit dem Overflow: hidden eingefügt.. Und er zieht die main_bg_down unter den text.. Seht selbst Nate-Pictures.de - Home

Wieso passiert dies nun.!?

 

[threadi]

Weil overflow hier nicht die richtige Lösung ist. Bitte lies dir auch meine Antwort dazu durch, und nicht nur die letzte Antwort die Du bekommen hast.

 

[djheke]

Weil overflow hier nicht die richtige Lösung ist. Bitte lies dir auch meine Antwort dazu durch, und nicht nur die letzte Antwort die Du bekommen hast.

Kann ich so nicht gelten lassen. Es funktioniert natürlich, wobei float:left besser wäre. Im Beispielcode wurde die Fusszeile verschwiegen. Also braucht die Klasse footer noch ein clear:both

Wobei die CSS Angaben oftmals doppelt gemoppelt sind. Also es ist noch viel Raum zum Optimieren.