Breite linker und rechter Div automatisch ausfüllen. Mitte fixe Breite

[CssJunky]

Hallo liebes Forum,

ich habe ein Problem mit meinem Drei-Spalten Layout. Die linke und rechte Spalte, sollen sich variabel und automatisch zur Fensterbreite anpassen. Die Mitte ist 600px breit.

Mein Ansatz sieht so aus:

HTML

    <div id="leftTop" class="showBorder">leftTop</div>
    <div id="formCenter" class="showBorder">Center</div>
    <div id="rightTop" class="showBorder">rightTop</div>

    <div id="leftBottom" class="showBorder">leftBottom</div>
    <div id="rightBottom" class="showBorder">rightBottom</div>

CSS

        * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
        
        .showBorder {
            border: 1px solid black;
        }
        
        #leftTop {
            
            height: 50%;
            width: 20%;
            position: absolute;
            left: 0%;
            top: 0%;
        }
        
        #formCenter {
            position: absolute;
            /*width: 60%;*/
            min-height: 100%;
            overflow: hidden;
            left: 20%;
            top: 0%;
            bottom: 0%;
            min-width: 600px;
            max-width: 600px;
            background-color: red;
            margin: 0;
        }
        
        #rightTop {
            position: absolute;
            width: 20%;
            height: 50%;
            left: 80%;
            top: 0%;
        }
        
        #leftBottom {
            position: absolute;
            width: 20%;
            height: 50%;
            top: 50%;
            left: 0%;
        }
        
        #rightBottom {
            position: absolute;
            width: 20%;
            height: 50%;
            top: 50%;
            left: 80%;
        }

Ich hatte vorher der mittleren Spalte auch einen relativen Wert gegeben (60%). Das Funktioniert auch sehr gut, allerdings, soll die mitte echt "nur" mindestens 600px und maximal auch sein. Zudem ist, es in dem Layout jetzt auch nicht zentriert.

Ich hoffe ihr könnt mir dabei weiter helfen.

Vielen Dank im Vorraus.

 

[CssJunky]

Mir ist gerade aufgefallen, dass wenn ich max-width weglasse und width: 60% auskommentiere, es soweit sehr gut ausschaut. Aber ab einer gewissen Fensterbreite, überlagert die rechte Spalte die mittlere. Was kann man tun, dass er dann anfängt horizontal zu scrollen?

Edit:

Hinzu kommt, dass sich die Höhenangaben nur auf das Fenster beziehen, aber nicht auf dem Inhalt. Der mittlere div ist länger als das Fenster, d.h. links und rechts ziehen nicht mit.

 

[phzu]

Hallo!

Ich habe mir das jetzt ehrlich gesagt nicht allzu genau angeschaut, allerdings glaube ich, dass es so nicht gut geht.

Verwende keine absolute Positionierung. Float: left und eine Breitenangabe reicht.

Die divs top* und bottom* solltest du evtl in je ein weiteres div packen, da es dann einfacher wird mit der Reihenfolge.

So etwa:

<div id="container">
<div id="left">
   <div id="leftTop" class="showBorder">leftTop</div>
   <div id="leftBottom" class="showBorder">leftBottom</div>
</div>
<div id="formCenter" class="showBorder">lCenter</div>
<div id="right">
   <div id="rightTop" class="showBorder">rightTop</div>
   <div id="rightBottom" class="showBorder">rightBottom</div>
</div>
<div>

Dem Center-Tag weist du 600px Breite zu, den anderen beiden nicht.

Das container div soll nur irgendein Elterntag darstellen. Das formatierst du mit margin: auto mittig.

Um die Breite der Sidebars festzulegen, benutze ein wenig JQuery, ist einfach zu lernen.

Mit $(window).width kannst du die Breite des Ausgabefensters ermitteln. Daraus berechnest du die uebrige Breite fuer die Sidebars. Die Funktion fuehrst du in den 2 Events $(document).ready und $(window).resize aus. Das ist jetzt keine Anleitung, sondern Tipps nach was du googlen kannst.



mfg

 

[djheke]

Versuch's mal hiermit
Gipspferd.de 3 Spalten Layout mit fixer Mitte und dynamischen Außenspalten
Anmerkung. Im ersten Beispiel müssen die Außenspalten Inhalte haben.