Div`s verspringen :(

    Nabend Leute,

    ich bau mir gerade nen kleines Testlayout auf und habe dabei ein Problem
    und zwar verspringen meine Div`s sobald das Browserfenster kleiner wird
    und ich weiß nicht wie ich das fixen kann.

    So (bei Maximierten Browser) sieht alles so aus wie es soll:

    [Blockierte Grafik: http://i1.tinypic.com/87dsg2g.jpg]


    Wenn das Browser Fenster nun kleiner wird fangen die Divs an zu verspringen

    [Blockierte Grafik: http://i17.tinypic.com/87dpjk4.jpg]


    Und hier mein HTMl / CSS Code

    HTML

    Zitat


    <body>

    <div id="head">Kopfbereich ROT</div>
    <div id="navi">Navigation GELB</div>
    <div id="quote">Zitatleiste GRÜN</div>
    <div id="misc">Sonstige Infos GRAU</div>
    <div id="content">Contentbereich BRAUN</div>

    </body>

    CSS

    Ich dachte eigentlich man kann mit dem min-width das verspringen verhindern :(
    Der Head z.B. verspringt nie.

    Ich wäre echt dankbar wenn mir da jemand sagen kann woran das liegt.

    Achja und eine Verständnis Frage habe ich noch und zwar muss ich bei meinem
    #Content ein margin-left von 150px geben, damit er vollständig hinter der Navigation hervorschaut ich dachte mit einem float:left würde ich erreichen, das er das Element Ignoriert und sich als nächstes angliedert, aber er rutscht dann ganz nach unten. Funktioniert also nur die Methode mit dem Padding-Left oder kann ich die gleiche Darstellung (das der Content zwischen Navi und Misc ist) auch anders erreichen ?

    Sorry für die Noob fragen aber das leuchtet mir gerade nicht ein.

    Gruß viva

    Zum einen verwendest du jeweils gleiche min-width und max-width-Werte. Das kann der IE6 überhaupt nicht interpretieren.
    Dass gefloatete divs bei verkleinerten Fenstern "verspringen" ist normal. Irgendwo müssen sie ja hin, wenn sie breiter sind als das Fenster.
    Nach Elvis' Vorschlag:

    HTML

    Code
    <div id="head">Kopfbereich ROT</div>
<div id="navi">Navigation GELB</div>
<div id="quote">Zitatleiste GRÜN</div>
<div id="content">contentbereich</div>
<div id="misc">Miscbereich</div>


    Dieser Code passt sich dann unterschiedlichen Fensterbreiten an. Allerdings kann es zu hier zu Überlappungen der Inhalte kommen, wenn das Fenster zu schmal wird.

    Hi,

    danke erstmal für eure Hilfe.

    Aber es gibt doch auch die Möglichkeit das mit den Containern nichts passiert wenn das Fenster kleiner wird. Das der Inhalt der vom Browserfenster nicht mehr angezeigt wird einfach verschwindet und nicht der ganze Container verspringt.

    Sowas hätte ich ganz gerne.


    Ich hoffe ich wisst was ich meine :(

    Hi,

    ich habe das jezt mal mit Prozentualen Angaben gemacht dann hab ich aber was natürlich logisch ist auch ein Layout wo sich der Container je kleiner er wird auch Prozentual zusammenzieht...

    Es gibt aber doch die Möglichkeit das mit dem ***** Container einfach nix passiert wenn das Browserfenster kleinen wird. Man sieht dann z.B. nur noch einen Teil des Containers der andere ist quasi außerhalb des Sichtbaren Bereichs :(

    Oh man es ist zum heulen

    Zitat von topfblume

    moin ...

    Setze die Divs doch in ein Weiteres und gebe diesem eine feste Breite.

    gruß ...

    Ach du bist ja nen Schatz ^^
    Danke das funktionukelt :)

    €dit:

    Aber ich versteh nicht ganz wieso das nur so klappt ?
    Wenn ich das DIV nicht drumherum habe und trotzdem jedem Div ne Feste größe gebe klappt es nicht hab ich nen Div drum klappt es O.o

    Kann mir das mal jemand erklären ?