Unklares Verhalten bei 3-Spalten-Design

cb1982 · 13 Februar 2013

Hallo zusammen,

ich habe aktuell ein Problem, das ich um es besser nachvollziehen zu können man in eine kleine Spielumgebung gepackt habe. Das Beispiel befindet sich unten.
Die Ränder habe ich nur zum testen eingebaut.

Dort habe ich ein paar verschachtelte Container. Page ist erstmal die gesamte Seite, darin ein gleich großes #content.
Innerhalb von Content gibt es dann right left und middle

Und jetzt geht es los. So wie es im Beispiel steht wird der Inhalt für right zwar rechts angezeigt, allerdings unterhalb des #content
Verschiebe ich <div id="right"></div> VOR <div id="middle"></div>
wird auch right innerhalb des content angezeigt.

Wo liegt da mein erster Denkfehler?

Das zweite:
Die höhe von #content und damit die Fläche der Hintergrundfarbe ist immer nur die Gesamthöhe von #middle.
Je mehr Inhalt dort steht, desto höher wird #content.
Ich hätte erwartet, dass sich die Höhe von content an dem höchste darin verschachteltem Element orientiert. Was muss ich also tun, damit #content immer so hoch ist wie das höchste Element innerhalb von #content?

Ich hoffe mir kann hier mir jemand helfen!

Beste Grüße
Christoph

Code:

<style type="text/css">


#page {
    position:relative; 
    width: 980px;
    margin: 0 auto;    
    border: 1px solid red;
}


#content { /* Gesamtcontainer für Content unterhalb der Kopfzeile */
    background-color:#f0f0f0;    
    width: 100%;


    border: 1px solid blue;
}


#left {
    width: 25%;
    float: left;
    border: 0px solid red;
}


#middle { /* Mittlere Spalte eines Angebots */
/*    width: 80%;*/
    margin: 0% 20% 0% 25%;
}


#right { /* Rechte Spalte eines Angebots */
    float:right;
    width: 20%;
}
</style>




<div id = page>
<div id= content>


<div id = left>
Links<br>
</div>
<div id = right>
Rechts <br>
</div>
<div id = middle>
Mitte
</div>


<div id = right>
Rechts <br>
</div>


</div>


</div>

Banana_Jones · 13 Februar 2013

Du musst #mitte ebenfalls floaten.

Außerdem musst du nach dem Floaten auch Clearen, das machst du nicht, deshalb stimmt die Höhe deines Containers nicht. Sprich als letztes Element in deinem Container ein weiteres <div> mit der Eigenschaft "clear: both"

djheke · 13 Februar 2013

Ist doch alles richtig. Du hast nur #right zweimal aufgerufen. Übrigens, #content kann weg und #page vergibst du einen bground:farbe; und overflow:hidden. Du musst die ID's Quoten ( "").

Code:

<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Testseite</title>
<link rel="stylesheet" type="text/css" href="style2.css" />

<style type="text/css">
#page {
    position:relative; 
    width: 980px;
    margin: 0 auto;    
    border: 1px solid red;
    background:#eee;
    overflow:hidden;
}


#left {
    width: 25%;
    float: left;
    border: 0px solid red;
}


#middle { 
    margin: 0% 20% 0% 25%;
    background:#aea;
}


#right { 
    float:right;
    width: 20%;
}
</style>




<div id = "page">
<div id = "left">
Links<br>
</div>
<div id = "right">
Rechts <br><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
</div>
<div id = "middle">
Mitte
<br style="clear:both;"/> <!-- Damit #middle immer die längste Spalte ist. -->
</div>
</div>

</body>
</html>

Unklares Verhalten bei 3-Spalten-Design

cb1982

Mitglied

Banana_Jones

Aktives Mitglied

djheke

Aktives Mitglied

Neueste Beiträge