Ich spiele schon eine Weile mit folgendem Problem herum, bin aber noch zu keiner befriedigenden Lösung gekommen:

- Am rechten (oder linken, das ist vom Prinzip her egal) Rand möchte ich eine Box haben, deren Breite sich aus ihrem Inhalt ergibt. Stichwort: Navigationsleiste

- der freie Raum links (bzw. rechts) davon soll ausgefüllt sein mit entweder Fließtext oder, und das ist der Knackpunkt:

- ein oder zwei nebeneinander stehenden Boxen, die sich den Rest vom freien Platz teilen (also den die Box die mit "float: left" bzw. "float: right" am Rand hängt nicht einnimmt)

Die übliche Lösung: man gibt der rechts/links schwebenden Box eine feste Breite und gibt dem Content-div diese Breite plus Freiraum als rechten/linken Einzug. Gut und schön, das geht aber nur, wenn man dieser Box eine feste Breite zuweist Wenn die Breite per se nicht bekannt ist, kann ich diese Breite auch nicht im CSS verwursten.

Der Box eine width von 100% aufzuzwingen bringt auch nix, weil die dann tatsächlich 100% breit ist und deswegen unter die float-enden Box rutscht.

Ich hab mir diverse Seiten über CSS und Boxen reingezogen, aber alle verwenden - soweit ich gesehen habe - feste Größen für die am Rand, z.B. hier:

Ist das mit CSS nicht möglich, daß ich sage "da rechts ist eine Box, die darf so groß werden wie sie will, und links daneben sind noch zwei Boxen, von denen jede 50% des übrig gebliebenen Platzes einnehmen darf (nicht der Gesamtbreite! das wäre ja trivial)"? Falls nicht, hat imho jemand beim Design des CSS box model gepennt

Vielleicht verstehe ich es falsch, aber ich hatte/habe mit einer ähnlichen Situation zu kämpfen gehabt. Meine Lösung war...:

eine Box links und eine rechts daneben in der die anderen zwei Boxen eingebettet sind. Sollte funktionieren. Zumindest ist es was mir ad-hoc einfällt

Grüße

Achso, ich bin übrigens definitv ein Verfechter des (fast) statischen Tabellenlayouts, schon alleine aus dem Grund weil man, sinnigerweise auch, Layout und Inhalt trennen sollte.
Bei CSS2 fehlen einige Ansätze u.a. Dein Problem zu lösen. Mit CCS3 soll ja, soweit ich weiß, eine Unterstützung für dynamischen Content hinzukommen

Tabellen... ja, ich weiß, daß die dafür meistens verwendet werden, aber das ist halt recht unflexibel. Insbesondere kann man dann keine konfigurierbare Ansicht bieten (neudeutsch "Skins"), weil die räumliche Aufteilung statisch und starr im HTML vorgegeben ist. Mit CSS hätte ich stattdessen die Möglichkeit den Boxen Bedeutung zu geben ("Das ist die Navigation", "das ist der Inhalt" etc) und wie und wo die anzuzeigen sind, entscheidet sich aufgrund der Style-Datei und steht nicht in der HTML-Datei. Das ist für mich echte Trennung von Inhalt und Layout, beim Layout über Tabellen hat man das imho nicht.

Die von dir genannte Lösung wäre auch ok, aber irgendwie habe ich es nicht hinbekommen Habe mich wohl in den Permutationen von "position" und "float" verheddert

Rantanplan: (…) "da rechts ist eine Box, die darf so groß werden wie sie will" – und wenn die die ganze Breite einnehmen will? Mir ist noch nicht ganz klar, um was es bei deinem Problem geht? Ist die Breite variabel weil sich die Schriftgrösse ändern kann und du keinen Zeilenumbruch willst? Oder muss diese Box beliebig langen Inhalt aufnehmen können?

Achso, andere Sache noch. Wenn Du soviel "rum-floatest" vergiß nicht das CSS (clear: left, right, both, none;)
Claude
Da bin ich auch etwas in Stocken geraten

Claude

Die Breite muß flexibel sein, weil der Inhalt nicht konstant ist

Ok, reden bzw. schreiben kann man viel, ein Beispiel ist besser. Nehmen wir mal die Hauptseite von hier: Der Kasten mit der Navigation ist mit float:right an die Seite gerückt. Dessen Breite möchte ich aber nicht statisch vorgeben, denn a) kann den jeder Teilnehmer ändern und b) hasse ich es, wenn Platz verschwendet wird oder bei machen die vorgegebene Breite doch nicht ausreicht. Der Kasten "Neuigkeiten" ist eine Notlösung, dem habe ich eine prozentuale Breite gegeben, weil - und deswegen fragte ich ja - ich es nicht fertig gebracht habe dem zu sagen "sei so breit wie die freie Breite (also die Breite, die auch der Fließtext nutzt)". Am liebsten hätte ich zwei Kästen nebeneinander, deren Breite flexibel ist (also mit der Fensterbreite mitgeht) und die jeweils 50% der Breite einnehmen. Oder noch anders gesagt: so wie es bei der Wikipedia auch ist, aber die verwenden Tabellen Und ich hasse Tabellen fürs Layout

Vor allem solltest du nicht vergessen, dass der IE meist eine sehr eigenwillige Interpretation von CSS-Layouts anbietet. Bin da schon so manches Mal ins Grübeln geraten.
Zu deinem Problem: meine Idee wäre auch des ersten Posts von macproduction gewesen. Allerdings würe auch mich der Sinn des Unterfangens interessieren.

Rantanplan: Ich kann da im Moment nicht mitmachen, durchschaue die verschiedenen CSS noch nicht und muss jetzt weg. Nur soviel, wenn ich nur deinen Quelltext mit dem darin eingegliederten CSS kopiere und so im Browser anzeige, dann fehlt da einiges, z.B. ist das Neuigkeiten-div mit 65% Breite definiert, das heisst, es kann ja gar nicht gleich breit sein wie der andere Fliesstext. Aber ich weiss, deine Frage zielte auf etwas anderes, wofür ich (noch) keine Antwort habe.

Claude

Ich vermute mal, weil er das Style-File nicht findet, die URL dafür ist relativ und wenn man das HTML in eine lokale Datei gibt, stimmt der Link nicht mehr.

Eine Testdatei, die auch lokal funktioniert (Links und Bilder nicht, aber das ist egal) und in der nur noch das wesentliche drin steht habe ich mal hochgeladen:

Meinst du so was:

Oder habe ich die falsch verstanden?
Denn code falls du ihn brauchst, kannst ihn haben.

Tricky

Danke für die Arbeit, aber so kenne ich es (leider) schon: Sidebar-divs mit fixer Größe, die man beim Content als Margin abzieht. Ich befürchte langsam, es geht tatsächlich nicht anders

PS: wofür sind die lustigen Schrägstriche bei "width" eigentlich gut?

Die zusätzlichen / sind für den IE.
Muss die Breite bei alles flexibel sein?
Denn das geht auch. Musst du nur 22% 50% 22% eingeben.
Achtung, der IE hat mit dieser Variante Probleme die sich aber mit * html #deindiv lösen lässt.

Ne, mit prozentualer Breitenangabe wollte ich auch nicht, weil dann die Breite der einen Box nicht mehr dem Inhalt entspricht

Vereinfacht wollte ich das:

1. zwei Boxen nebeneinander

2. die rechte ist so breit wie ihr Inhalt (also weder % noch feste Breite)

3. die linke füllt den übrig gebliebenen Platz aus

Reiner Fließtext hat damit kein Problem. Die rechte Box float-et rechts, der Text umfließt, nimmt sich also den vorhandenen Platz. Mit Boxen scheint das nicht zu gehen, denn 100% Breite bezieht sich nicht auf die verfügbare Breite, sondern auf die Gesamtbreite - soweit mein Kenntnisstand. Deswegen scheint das was ich haben wollte mit CSS2 nicht realisierbar zu sein. Oder doch?

Etwa so?

Es ist zwar die rechte Box am floaten, aber sollte kein Problem sein das anzupassen

Äh Wenn jetzt noch in dem #content eine Box wäre, die den Platz zwischen Außenrand und #sidebar-a ausnutzen würde, ja

Oben habe ich mal das reale Beispiel gepostet, worum es mir geht: Der Kasten "Inhalt" floatet nach rechts, der soll keine feste Breite haben, weil sich der Inhalt ändert. Der Kasten "Neuigkeiten" wäre jetzt so ein Kandidat, den hätte ich gerne auf die maximale Breite gebracht, die zwischen linkem Rand und dem Inhalt-Kasten frei ist. So wie der Text fließt.

PS: tatsächlich möchte ich den Neuigkeiten-Kasten nicht so breit bringen, sondern deren zwei Boxen, aber das ist ein untergeordnetes Problem, denn wenn man eine Box so breit bringen könnte wie den verfügbaren Platz, dann kann man da ja zwei (oder x) Boxen reinsetzen mit width:50%. Klarer geworden?

Das Design ist doch gut, unter deinem Link... ?
Neue Version unter:

Rantanplan: Wenn sich die Breite des Navigations-div dem Inhalt anpassen soll, dann ist das eben width: auto; (und somit der Standardwert). Diese Navigations-div floatet rechts und hat noch entsprechende paddings und/oder margins. Das Inhalt-div nimmt sich dann den Rest der Breite.

Auch wenn man floatenden divs eine Breite geben müsste, geht es ausser im IE für Mac trotzdem und geht sogar bei der Validierung durch.

Ein anderes Problem dabei ist, dass der Inhaltsfliesstext ein eventuell weniger hohes Navigations-div weiter unten umfliesst, da dem Inhalts-div keine Breite gegeben werden kann (die ist ja unbekannt, weil auch die Breite des Navigations-div erst durch dessen Inhalt bestimmt wird.

Ich kann sonst keine Lösungsmöglichkeit per tabellenlosem CSS sehen.

Tricky

Mir brummt die Birne... Das Witzige ist, daß Fließtext die freien Breiten ausnutzt, Boxen tun das aber nicht. Bei deinem Beispiel sieht es so aus, als würde es funktionieren, wenn man in "Neuigkeiten" Text reinsetzt, dann fließt er richtig. Aber tatsächlich erstreckt sich die Box bis zum Rand... unter der anderen Box hindurch. Wenn man den divs Ränder gibt - so wie ich es auf der Beispielseite getan habe - dann sieht man, daß die Boxen nicht nebeneinander liegen, sondern übereinander. Soweit war ich auch schon

Claude

Ich bin versucht einfach zu sagen: danke, das wars und ich vergesse es. Ich kann mich täuschen und .. ich hoffe ich täusche mich... aber gib den Boxen doch mal Rahmen und du wirst sehen, daß die übereinander liegen und nur der Text nicht in die andere Box reinfließt, aber die Box liegt (je nach z-order) unter oder über der anderen Box. Wenn du den Boxen Rahmen geben willst, dann taugt das nicht. Nimm in meiner test.html bei der Neuigkeiten-Box einfach mal das width raus und du wirst sehen, daß die Boxen übereinander liegen und nicht nebeneinander. Oder um es mit deinen Worten zu sagen: Nicht die div nimmt sich die zur Verfügung stehende Breite, sondern nur der darin enthaltene Text. Die div läuft bis zum Maximum, ohne Rücksicht auf andere Boxen.

tricky

Mach mal bei #news einen Rahmen rein:

#news {
border: 4px solid #ad6;
...
}

und etwas mehr Text... die Box hört nicht bei der anderen Box #sidebar-a auf, sondern läuft unter sie hindurch bis zum Rand. Der Text - jaja, das sag ich ja - der Text, der fließt richtig.

Genau das ist ja meine Frage: wie bringe ich der blöden Box bei, daß sie so wie der Text fließen soll und nicht alle anderen Elemente ignoriert? Der Text tut es ja. Puh... wie soll ich es noch beschreiben? Mach mal die oben angegebene Änderungen in deinen letzten Source rein... ich hoffe du verstehst, was ich meine.

Ich habe mal einen schwarzen Rahmen genommen, um es stärker zu betonen. Hier also so wie es nicht sein soll... die Box läuft unter der anderen durch.

Rantanplan
Auf meiner Seite ist der Hauptbereich und die Navigationsleiste jeweils relativ per Prozente. Meinst Du das?

Anderer Ansatz:
Versuch, die Breite der linken Box errechnen zu lassen und erzeug die css-datei dynamisch

Hier sind einige grundlegende Layouts beispielhaft mit CSS vorgestellt: Mehrspaltig, variabele oder feste Breite und so weiter:
glish.com/css/2.asp

Außerdem kann man mit dem z-index die Reihenfolge, welcher Bereich welchen anderen verdeckt und welcher optisch oben drauf liegt, festlegen.

Ich denke, dass da die Breiten zu wenig definiert sind. Ob diese automatisch errechnet und dann ins CSS eingesetzt werden könnten ist aus meinem Kenntnisstand nicht abschätzbar.

Die Sache wäre mit einem minimalen Tabellen-Layout umsetzbar.

Bis jetzt kam ich ohne Tabelle soweit wie im Folgenden gezeigt (mach mal probeweise Kommentarzeichen, damit das hier im Forum hoffentlich angezeigt wird). Das wird der Stand sein, wo sich auch Rantanplan die Zähne ausbeisst:



CSS:

*
{
margin: 0;
padding: 0;
border: none;
}

body
{
background: #fff;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 150%;
text-align: left;
}

p
{
margin-bottom: 0.8em;
}

.clear
{
clear: both;
}

#navegation
{
float: right;
padding: 10px;
margin: 11px;
margin-bottom: 5000px;
background-color: #ccc;
border: 2px solid #666;
}

#navegation ul
{
list-style-type: none;
}

#inhalt
{
padding: 25px;
background-color: #d00;
}

#box_1
{
border: 2px solid #ccc;
padding: 10px;
margin-top: 20px;
margin-right: auto;
}

Das Problem ist beim Box_1-div sichtbar; es könnte z.B. gelöst werden, wenn das Inhalt-div ein margin-right in der Grösse der Breite des Navigations-div hätte (z.B. schrieb ich).

Blöd, das HTML lässt sich nicht in den Forumstext kopieren. Was nun?

Als Bild:

Damit sind wir ja wohl weit von den hier zulässigen Forenthemen entfernt …

MacMark
Nein, leider nicht Neuer Versuch: ich möchte an einem Rand einen Kasten haben, von dem ich aber nicht weiß, wie breit der sein wird, daher kann ich das auch nicht im CSS festlegen. Neben diesem Kasten möchte ich einen zweiten Kasten haben, dem ich sagen möchte "Nimm dir den Platz, der noch frei ist". So wie es der Text auch macht. Was mir fehlt ist, wie ich "Nimm dir den Platz der frei ist" als CSS formuliere

Schnapper

Äh... da müßte ich für jeden Seitenaufruf eine neue CSS generieren, weil der Inhalt sich abhängig vom eingeloggten Benutzer ändern kann. Ne ne, also bevor ich solchen Zinnober anfangen würde, würde ich halt das tun, was die halbe Welt macht: Tabellen zum Layouten. Damit geht das was ich wollte eigentlich problemlos, aber ich hab mir halt in den Kopf gesetzt, daß es auch mit CSS gehen sollte.

MacMark

Naja... der Witz ist ja: es sollen keine Boxen übereinander liegen, sondern sie sollen nebeneinander liegen...

Claude

Danke, ich kucke mir das in Ruhe an

Rantanplan
Warum weißt Du nicht, wie breit der eine Kasten wird? Wodurch wird dessen Größe denn bestimmt?

Claude

Funktioniert leider auch nicht: die #box_1 nimmt die gesamte Breite ein und läuft somit unter die #navigation. Der Text in #box_1 spart nur den Bereich der #navigation aus, wegen des hohen margin-bottom.

Das ist nicht das was ich suche... Ich will ja eben nicht, daß die Boxen übereinander liegen, sondern daß die Boxen nebeneinander liegen (nicht nur der Inhalt der Boxen, sondern die Boxen selber, sonst kann ich keinen Rahmen drum machen. Siehe auch So bzw. so ähnlich (nämlich funktionierend) soll es aussehen).

Ich habe außerdem aus deinem Quelltext zwei Dateien gemacht und hochgeladen, für den Fall, daß jemand noch eine Idee hat und es ausprobieren möchte: und

MacMark
Die Breite wird durch dessen Inhalt bestimmt.

Ich weiß, ich bin ein sturer Kerl Ich könnte auch sagen: ok, ich nehme einfach eine feste Breite und wenn jemand etwas reinmacht was breiter ist, dann sieht es halt einfach mistig aus. Ich mag das aber nicht. Der Kasten soll so breit sein, wie es sein Inhalt erfordert. Kein weißer Trauerrand außenrum, keine zwangsweise abgeschnittenen Zeilen oder Umbrüche, einfach so breit wie er sein muß.

Konkret besichtigen kann man das hier: Das ist ein Wiki, d.h. jeder kann da drin editieren, deswegen kann sich der Inhalt ändern (ok, er könnte sich auch ändern, weil der Inhalt dynamisch erzeugt wird). Der Kasten Neuigkeiten soll nun den Platz vom linken Rand bis zum Navigationskasten einnehmen, aber eben weder drunter noch drüber liegen, sonst kann ich ja keinen Rahmen drum herum machen.

So.... tatsächlich möchte ich das aber auch nicht, aber ich stifte nur Verwirrung wenn ich sage was ich wirklich möchte: ich möchte zwei Kästen nebeneinander neben dem Navigationskasten, denn für einen ist der Platz zu breit. Allerdings kann man dieses Problem eben auf den obigen zurückführen, denn wenn es eine Box gibt, die die Breite vom linken Rand bis zum rechten der Navigationsbox einnimmt, dann kann ich da zwei Boxen reinsetzen und denen jeweils 50% Breite geben (oder etwas anderes, was sich auf 100% addiert).

Puh.... Ich hab jetzt ein echtes Problem. Drücke ich mich so scheiße aus, daß mich niemand versteht oder ist meine Idee völlig abseitig?

PS: langsam wird mir klar, warum die Leute bei der Wikipedia dafür häßliche Tabellen verwenden

Also das die #news box untereinander lieg ist richtig, und lässt sich auch nicht ändern. aber wenn du die sidebar einfach grösser machst?

Der Realfall ist ja wie gesagt unter zu besichtigen, aber hier mal eine schematische Zeichnung, was ich mir vorstelle:

Tricky
Ok, wenn es sich nicht ändern läßt, dann brauche ich auch nicht nach einer Lösung suchen, dann geht das mit CSS nicht. Und dann möchte ich gerne mal wissen, welche Pfeife sich das CSS box model ausgedacht hat. amp;
[/url]

Die Box liegt unter der anderen und reicht bis an den Rand. Wie machst du jetzt den Rand um die Box sichtbar? Und zwar da wo er hingehört: also um den Text, nicht um die (zu große) Box?

Ok, ok, geht nicht... Habs schon verstanden.

Zum obigen Bild habe ich nun eine Testdatei:

Ich fürchte, die sauberste Lösung ist absolute Positionierung nach folgendem Schema. Leg zur Not ein paar verschiedene externe CSS-Sheets an mit jeweils unterschiedlichen Angaben für die Breiten. Dann bindest Du dynamisch je nach gewünschter Breite das passende ein.

#rechts
{
position: absolute;
right: 0px;
width:33%;
}

#links
{
position: absolute;
left: 0px;
width: 60%;
}

Box2 sollte innerhalb einer Box sein, die auch den Rest-Text enthält.
Ähnlich wie @@kirk beschreibt.

Vielleicht hilft es auch mit position: relative zu arbeiten.

rofl
Hm, ich habe ein massives Problem mit dem Verständnis. Das ganze funktioniert völlig entgegen meiner eigenen Logik, ich hab schon Kopfschmerzen davon.

Frage: wie geht das mit der zweiten Box in der ersten? Ich habe eine reingesetzt, habs auch mit display:inline versucht (dann erscheint aber kein Rahmen). Wenn ich display:inline nicht mache, dann wird die geschachtelte Box logischerweise so groß wie die erste...

Hab ich auch schon. Problem ist: ich verstehe die Logik dahinter nicht. Ich habe mir auch mal Beispiele bei w3c angekuckt, da machen die Sachen mit position:absolute, wo ich Haus und Hof verwettet hätte, daß da postion:relative hingehört.

kirk
Die Rahmen der Textabsätze links erstrecken sich bis hinter die Box rechts. Sobald die eine Farbe oder Rahmen bekommen, sieht man das auch. Die Box rechts schwebt über dem Rest und verdrängt nur den Inhalt nach links, nicht aber den Rahmen des links sichtbaren Inhalts. Die rechte Box ist nicht außerhalb des Inhalts, den man rechts sieht, obwohl es so aussieht. Aber das täuscht.

Rantanplan

Ich bin ja auch kein Held im CSS, muss raumseidank nicht damit Geld verdienen.
Aber wenn ich meinen Kollegen hier Frage, dann sagt der mir:
"Sollte mit relative gehe, aber mit dynamisch ist das schwerer, besser einfach die rechte Box1 festsetzen, und die box2 mit 60% - Wert px einfügen."

Da aber kein Browser den Standard 100% auslegt (ja okay WebKit ACID ready), sollte man sich da nicht soviel Kopf drum machen. Lieber dann einfach bei ADC Reference das mit TOC klauen.

Absolute Positionierung positioniert relativ zum Elternelement.

Relative Positionierung positioniert relativ zur normalen Position, die das Element ohne Stylesheet hätte.

Static Positionierung ist wie normale Positionierung ohne CSS.

Fixed Positionierung positioniert relative zum Browserfenster.

Du verwechselst relative mit absolute

rofl

Ich machs ja auch nur just for fun... Wenn ich die Box auf position:relative setze, dann liegt sie plötzlich vor #box_1, ohne diese Angabe dahinter. Sonst ändert sich nix.

Die ToC beim ADC meinst du? Das sind doch Frames?

all

So... also, mir kommen echt die Tränen. Ich habe das oben angebene Beispiel jetzt realisiert. In zwei Minuten, mit einer klitzekleinen Modifikation der Datei Zu besichtigen unter Und wieso geht es nun? Ganz einfach, ich habe das gemacht, was ich gesagt habe: mit Tabellen ist sowas trivial zu machen Und jetzt glaube ich auch zu wissen, warum das CSS box model nie das Tabellen-Layout abgelöst hat: weil die Logik dahinter hirntot ist. Oder wie seht ihr das? Kuckt euch einfach mal das test3.html an, so wollte ich es haben, aber so habe ich es selbst mit eurer Hilfe nicht hingebracht (ohne Hilfe einer Tabelle).

MacMark
Absolut richtig und ich bin jetzt auch relativ am Ende... nervlich.

Tabellen sind nichts böses
Es wird leider von vielen missbrauchst für das Layout.
Solange du sparsam mit Tabellen umgehst oder nur dort anwendest, wo sie Sinn machen ist alles im Lot
barrierefrei ist das Zauberwort. Und wird gleichgesetzt als Tabellenloses Design. Das ist Falsch.

Äh.. sehe gerade, ist doch noch nicht so wie ich es haben wollte... die Spaltenbreite ist zu klein, es kommt zum Umbruch wo keiner sein sollte. Zumindest in OmniWeb...

Tricky

Stimmt schon, Tabellen sind nichts böses. Für tabellarische Darstellungen genau richtig, dafür sind sie da. Aber du sagst ja selbst "Es wird leider von vielen missbrauchst für das Layout." Und genau das wollte ich eben vermeiden und ein sauberes CSS-Layout machen.

habe es auch gerade mal versucht. Kommt das dem nahe, was du wolltest?

stiffler

*Lechz* Ja, sieht genauso aus, wie ich es gerne hätte Wie hast du das hinbekommen?

display: inline-table;

stifflerDas ist CSS-2-Sprache für eine Tabelle. Du vermeidest nur das table Element, indem Du die CSS-2-Variante für table nimmst. Im Endeffekt nutzt Du hier eine Tabelle für Layout.