Ich hab wie ein verrückter gesucht und leider keine passende Antwort bis jetzt gefunden.
Ich möchte gern 3 Div Container definieren, wobei alle an einander liegen, sprich ohne große zwischen abstände(nur ästhethischer natur).
Und der Mittlere Variabel ist bis zu einer mind. Breite.
Hier ein Layout: http://i39.tinypic.com/34xi711.jpg
Egal was ich versucht habe, entweder sind die Divs inneinander über gegangen, oder haben sich beim zusammenschieben untereinander angeordnet.
Ich habe eine Seite gefunden die ziemlich genau das zeigt was ich will:The Elder Scrolls 5 Skyrim Mods
Ich möchte 2 Navigationen, einmal rechts, einmal links. In der Mitte der Content der sich soweit wie möglich ausbreitet zur Seite und beim zusammenschieben eine mindbreite behält.
-.- wahrscheinlich ist es total trivial das zu realisieren, aber ich werd aus dem Quelltext von der oben genannten Seite leider nicht schlau und mir gehn auch die ideen aus.
Hab die Seite nicht näher angeschaut, aber das was Du willst ist dank CSS eigentlich ganz simpel. Achte zunächst auf die richtige Reihenfolge des HTML-Codes:
Danke erstmal für die flotte Antwort, und das noch zu solchen Uhrzeiten ; )
Aber leider löst das mein Problem nicht ganz. Nun ist zwar meine Mitte Variabel und die Seiten schön angeordnet, allerdings wenn ich das Fenster nun verkleiner und zusammenschiebe(Horizontal), schiebt sich der Rechte Div Container einfach über die Mitte. Ich möchte aber das er bei 600px nicht mehr weiter minimiert. Der Min-width befehl scheint nichts zu bringen in dieser Konstellation.
Da ich im ersten Semester von der Informatik bin interessiert mich zudem auch der Grund warum man die Reihenfolge Links,Rechts und Mitte machen muss?
Und nicht vom logischen her von links nach rechts.
Das mittlere Div Center schiebt sich aus dem Bereich nach unten.
Erklärung:
Mit float leitet man den Umfluss um den verbleibenden Bereich ein. Man schiebt also den ersten Container(DIV) mit float nach links, d.h. der weitere Inhalt wird rechts um den Container umflossen. Nun schiebt man den zweiten Container mit float nach rechts, auch hier wird dann der Rest links um den Container(DIV) umflossen.
Man hat also nun zwei Container, einen links und einen rechts. Der Dritte Container schiebt sich nun in den verbleibenden Teil, hier die Mitte.
Da jeder der beiden äusseren Containern 200px einnimmt sind also bereits 400px der Breite belegt. Der mittlere Container soll nun mindestens 600px haben.
Wenn das Fenster verkleinert wird, verbleibt somit der mittlere Container solange in der Mitte wie Platz dafür vorhanden ist,
also 200px + 600px + 200px = 1000px Gesamtbreite dafür vorhanden sind.
Wird das Fenster (Viewport genannt) kleiner als 1000px ist für den mittleren Container kein Platz mehr und er wandert nach unten, wo er die volle Breite einnimmt, da er das ja darf(kein max-width und keine feste Breite).
Da der mittlere Container aber in der Mitte verbleiben soll und dafür wie errechnet 1000px mindestens benötigt werden, gibt man einfach dem übergeordneten Container den Platz von mindestens 1000px vor. Da der übergeordnete Container auch das Element body sein kann, lautet in diesem Fall dann die Anweisung:
body {min-width:1000px;} und schon fluppt es wie gewünscht. Es wird ein horizontaler Scrollbalken eingeblendet.
Zur Veranschaulichung hier noch mal der gesamte
[HTML]
drei Divs Mitte feste Groesse
html, body { background-color:#fff; font-weight:bold; font-family:Arial; font-size:120%; height:100%; margin:0; padding:0;}
body {
min-width:1000px;
}
#left {
float:left;
width:200px;
height:500px;
background-color:yellow;
}
#right {
float:right;
width:200px;
height:500px;
background-color:yellow;
}
#middle {
background-color:blue;
min-width:600px;
height:500px;
}
Was ne Super Klasse Erklärung!!
Ich musste zwar grad bei dem wie die 1000px zustande kommen nochmal kurz nachdenken aber jetzt hats klick gemacht =D und siehe da es funktioniert einwandfrei. Wirklich eine tolle Heranführung und Erklärung gewesen, auch nochmal auf das eingehen der anordnung. Macht für mich jetzt vollkommen Sinn =)