RPG-Maker Quartier

Hallo,

Ich versuch grad mein Layout zu optimieren und schaff es nicht ohne eine Tabelle. Wenn es nun so ist, ist es auch egal, möchte aber gerne wissen ob es nicht doch über css geht.
Ich möchte links einen Hauptteil variabler breite und rechts eine Sidebar mit fixer Breite.
Problem ist, dass sich der Haupteil immer über oder unter der Sidebar schiebt, statt daneben zu bleiben.

Folgender Code zeigt meinen Testfall.
Die oberen Container verhalten sich bei Änderung der Größe korrekt, sind aber mit einer table angeordnet, die unteren nicht.


Jemand ne Ahnung?

_________________

DIV haben immer die volle Breite, daher brauchst du das 100% nicht und auch das display: inline-block ist eher kontraproduktiv.
Elemente die Rechts gefloatet werden müssen vor dem daneben liegenden Element definiert werden.

jo, width 100% + inline-block haben die gleiche Wirkung wie block.


Das ist doch genau das was ich gesucht hab.
"Den Offset auf einer Seite durch margin definieren."

Sollte ich eigentlich wissen. Mein html/css Kurs ist nur schon fast 2 Jahre her, da kann man auch so was simples mal vergessen.

Danke.

mfg TWS

_________________

Nicht ganz ... bei width: auto; wird padding und margin mit einbezogen, während 100% immer + padding, margin, border zählt. Folge ist das eine Box mit 100% Breite und nem Padding plötzlich breiter ist als gewollt.

Ich hab ein neues oder eher ein Folgeproblem:
Da ich als Inhalt wiederum floats benutze, springt der Inhalt beim ersten clear: right; unterhalb der Sidebar.
Lässt sich das irgendwie vermeiden oder muss ich doch ne Tabelle nehmen?

_________________

Es gibt keinen direkten Weg.
Aber des wegen muss man noch lange keine Tabellen nehmen, die sind nicht für Layouts gedacht.

Es geht eigentlich nur mit Wrapper Elementen:

Variante eins, #main wie gehabt mit einem Inhalts div welches gefloatet ist.
Hier geht #main weiterhin bis ans Ende von #side aber wenigtens springt der Text nicht mehr nach unten. Damit #main auch nicht bis nach unten geht würde man noch einen weiteres div benötigen.

http://jsbin.com/ujiyad/1/edit

Variante zwei beide #main und #side haben %-tuale Breiten und sind beide gefloatet.
Aber auch hier wrapper divs, damit padding und Prozentangabe nicht addiert werden.

http://jsbin.com/alagal/1/edit

danke, hat geholfen.

edit:
Fürs Ergebnis, folge dem Link in meiner Signatur.

_________________

Die definitive Referenz für dreispaltige Layouts dürfte wahrscheinlich dieser alistapart-Artikel sein.

Illustriert auch schön, wieso CSS fundamental kaputt ist, wenn ein absolutes Standardlayout wie dieses "holy grail" genannt werden muß. Tabellen sind aber in der Tat kaum besser.
Mit CSS3 gibt es glaub ich langsam bessere Alternativen, etwa FlexBox, aber dazu weiß ich nix bzw. Browser-Support ist wahrscheinlich auch noch etwas eingeschränkt.

Es gibt genug Gründe wieso man Jahre lang meist an starren Web-Designs fest gehalten hat. Und das CSS es nicht anders kann ist eher nicht der Hauptgrund.
Momentan entwickelt sich das Internet aber wieder etwas weg von diesen komplett starren Desings zu sogenannten Responsive Web-Designs. Hier liegt zwar ein starres Design zu Grunde, dieses wird aber für verschiedene Auflösungen optimiert: Desktop-Widescreen, Desktop, Tablets, Smartphone.

Das hat nichts mit starr oder nicht starr zu tun, sondern daß Vanilla CSS ganz einfache Layout-Strukturen schlecht umsetzen kann. Ein so langer Artikel (+ die gesamte Historie) für ein einfaches 3-Spalten-Layout bedeutet, daß da etwas schiefgeht; das Floating-Prinzip ist, für diese Aufgabe, einfach fundamental ungeeignet. FlexBox (und andere) ist nur ein lange nötiges gridbasiertes System wie es blueprint, bootstrap etc. schon lange ermöglichen - nur halt dann ohne den Sourcecode mit nicht-semantischen Klassen zuzumüllen.

Um die Frage, ob liquid, fluid oder elastic geht es dabei erst einmal nicht.

Solange man Layouts mit festen Breiten umsetzt, macht das bisherige floating Konzept aber keine Probleme.
Ansonsten empfehle ich nach wie vor http://960.gs/ dann brauch man sich ums floating selber keine Sorgen zu machen .

Da ist es zweifelsohne einfacher, aber doch: gleich hohe Spalten sind auch bei festen Breiten nicht ohne weiteres möglich - zumindest nicht bei dynamischen Content.


Die Existenz solcher Frameworks ist doch eben genau case in point daß Vanilla CSS diese Layoutanforderungen nicht trivialerweise erfüllt; ich glaube dazu war es ursprünglich nämlich auch nie gedacht. Frameworks haben natürlich auch ihre Probleme - so legt man etwa Layoutanweisungen wie Spaltenbreiten im HTML-Code fest, was unschön ist. Nichtsdestotrotz hab ich auch schon Blueprint etc. verwendet, einfach weil es simpler ist.
Flexbox oder CSS grids sind aber für mich tatsächlich eine viel zukunftsträchtigere Alternative, nur wird der Browser-Support lange genug auf sich warten lassen - insbesondere da man die ganzen alten Browser ja so schwer vom Markt kriegt.