3 Div Boxen nebeneinander (Mitte variable Größe)

[ShokoJoe]

Hallo Leute !

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:

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.

Ich hoffe ihr könnt mir helfen !

Gruß ShokoJoe

 

[threadi]

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:

<div id="links">linker Bereich</div>
<div id="rechts">rechter Bereich</div>
<div id="mitte">die Mitte</div>

#links { float: left; }
#rechts { float: right; }
#links, #rechts { width: 200px; }
#mitte { margin: 0 200px; }

Moderation: Da deine Frage wie auch die Lösung primär auf CSS abzielt, habe ich dein Topic auch mal in den richtigen Bereich verschoben.

 

[ShokoJoe]

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.

hier mal mein CSS Code:

#LeftSide {float: left; width: 200px;}
#Center {margin: 0 200px; min-width: 600px;}
#RightSide {float: right; width: 200px;}

und HTML:

<div id="wrapper">
<div id="LeftSide"> <p>Links</p>
</div>

<div id="RightSide"> <p>Rechts</p>
</div>

<div id="Center"> <p>Mitte</p>
</div>
</div>

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.

Danke im vorraus =)

 

[Wustersoss]

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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title> drei Divs Mitte feste Groesse</title>
    <meta name="description" content="Beschreibung der Seite">

<style type="text/css">
    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;
    }
</style>

</head>

<body> 
    <div id=left>
       <p> links</p>
    </div> 
    <div id=right>
       <p> rechts</p>
    </div>
    <div id=middle>
       <p>mitte</p> 
    </div>
</body>
</html>

 

[ShokoJoe]

Wow =D

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 =)

Vielen vielen Dank ; )

Ich wünsch ne angenehme nacht =D

 

[skavenger]

Vielen Dank für die gut verständliche Erklärung!