CSS 2-spaltiges, 2-zeiliges Layout

[te one]

Da ich wieder mal kurz vor dem verzweifeln bin, wende ich mich an euch:

Und zwar möchte ich ein Seiten-Layout mit CSS welches 4 Teile beinhaltet.
Aussehen soll es so: (leider zerstört es meine Grafik sobald ich abschicke. Aber es sind eigentlich halt oben 2 Spalten (linke ist 250px, rechte soll den Rest bekommen) mit der Höhe von (Gesamthöhe-250px). Unten sind dann wieder 2 Spalten von denen die linke wieder 250px breit ist und die rechte den Rest bekommen soll. Die Höhe des unteren Teils soll 250px betragen.

    Menü                |     Main
    Breite: 250px    |    Breite: Rest
    Höhe: Rest        |    Höhe: Rest
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
                             |
-----------------------|---------------------------------------------------------------------
    Karte                |     Chat
    Breite: 250px    |    Breite: Rest
    Höhe: 250px     |    Höhe: 250px
                             |
                             |
                             |

Karte soll nicht scrollbar sein.
Menü, Main und Chat sollen jeweils einen eigenen Scrollbalken besitzen.

Mein jetziges Layout funktioniert auf den ersten Blick ganz gut. Sobald ein Inhalt aber mal länger wird macht es sachen, die es nicht soll.

Aktuelles CSS:

#wrapper {
width:100%;
height:100%;
background-color:white;
}
#menu {
border-right:1px dotted black;
position:absolute;
/*background-color:black;*/
width:206px;
height:100%;
margin-bottom:216px;
padding-left:10px;
padding-right:10px;
top:0px;
float:left;
}
#map { /*Hier Karte genannt*/
position:absolute;
/*background-color:yellow;*/
width:206px;
height:206px;
bottom:0px;
padding:10px;
}
#main {
position:absolute;
/*background-color:red;*/
margin-left:226px;
margin-bottom:226px;
padding:10px;
}
#chat {
position:absolute;
/*background-color:blue;*/
height:206px;
margin-left:226px;
padding:10px;
bottom:0px;
}

Wie um Himmels Willen bekomm ich das gebacken?
Würde nur ungern zu einer HTML-Tabelle als Layout greifen. Aber damit würde es wahrscheinlich ohne Probleme klappen.

 

[seluce]

Arbeite doch mit relativen Positionen bzw. noch besser mit float (und ggf. padding).

Das einfachste ist ein großen Container und anschließend in diesem mehrere Kleine einzufügen und diese via float zu positionieren. Dann haste auch keine Probleme mit Auflösungen und px-Angaben.

 

[Flup]

Hm, kann doch noch was beitragen, vlt hilft dir das hier: http://960.gs/demo.html
Natürlich brauchst du kein 12er Grid, aber wie man sowas grundsätzlich aufbaut sollte klar werden.

 

[racer320kmh]

Positioniere das übergreifende Div wrapper relativ, die anderen absolut. Dann ohne margin, nur mit top, left, usw.
Scrollbars bekommst du mit overflow: auto oder scroll - aber nur wenn der Inhalt zu lang ist - verhindern kannst du sie per overflow: hidden.

 

[te one]

@seluce: Da fängt es dann aber schon wieder an. Wenn ich nen div links floate mit ner Breite von 250px, und dann rechts daneben einen haben möchte, der den Rest der Seite füllt wird dieser durch width:100% so breit wie der bildschirm und dann nach rechts verschoben.
Oder klappt das durch den Wrapper? (glaube aber das habe ich schon probiert)

@Flup: Danke guck ich mir mal an

@racer: Wenn ich nun aber den Main-Div auf absolut setze und left:250px mache (bei einer Breite von 100%) schiebt er es ja theoretisch wieder rechts raus (eben um diese 250px).
Durch den relativen Wrapper könnte man das wahrscheinlich nicht sehen, aber trotzdem geht dann doch der Text am rechten Rand einfach ausm Bildschirm raus? Oder nicht?!

 

[racer320kmh]

Ich habe es jetzt mit floaten für dich erstellt. Variable Höhe habe ich nicht hinbekommen.

#wrapper {
width:100%;
height:100%;
background-color:white;
}
#menu {
border-right:1px dotted black;
background-color: #808080;
width:250px;
height:400px;
float:left;
overflow: auto;
}
#map { /*Hier Karte genannt*/
background-color:yellow;
width:250px;
height:250px;
float: left;
}
#main {
background-color:red;
height: 400px;
min-width: 400px;
overflow: auto;
}
#chat {
background-color: blue;
height: 250px;
min-width: 400px;
overflow: auto;
}
#oben {

}
#unten {

}

HTML:

<div id="wrapper">
<div id="oben">
<div id="menu">

</div>
<div id="main">

</div>

</div>
<div id="unten">
<div id="map">

</div>
<div id="chat">

</div>

</div>
</div>

 

[te one]

Irgendwie meinen alle, dass CSS alles möglich macht und man das nutzen soll, aber effektiv scheitert es an solche Kleinigkeiten
Gäbe es die Möglichkeit Angabe wie "100%-250px" zu benutzen, würde alles klappen...

Entweder stell ich mich nur zu blöd an, oder das geht einfach nicht (anscheinend hats bei dir ja auch net so geklappt, scheint also nicht nur mir so zu gehen)

 

[mercsen]

in CSS 3 ist es möglich zu rechnen, alternativ über JavaScript. Ich nutze CSS mittlerweile auch nur noch um klassen zu erstellen und styles fest zu legen, positionieren etc. erledige ich mit JS.
Wenn man das allerdinsg nicht nutzen will wirds schwieig ^^

 

[killray]

Und was machst du wenn jemand ohne JS surft, gibt ja nun doch schon einige ^^.

 

[te one]

Ab wann/welche Browser wird CSS3 unterstützt?

Hm ohne JS wäre es natürlich schöner. Bräuchte in meinem ganzen Projekt nur an einem kleinen Stückchen ein bisschen JS wobei ich das für nicht-JS-ler ersetze, ohne dass die große Nachteile haben.

Jetzt wärs natürlich schade wenn ich die ganze Seite JS-abhänging mache...