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

@MacMark Klar, nur ist es doch auch dafür gedacht!? Oder nicht?

stiffler
CSS-2 "display: table" und "display: inline-table" sind notwendig, um Tabellen in XML und anderen Sprachen zu realisieren. HTML hat schon ein table Element, benötigt daher diese CSS-2-tables nicht. Ohne diese neuen Elemente könnte außerhalb von HTML keine Tabelle dargestellt werden.

Du nutzt also ein Tabellenelement (von CSS 2) für Layoutzwecke. Dann kannst Du auch gleich table (von HTML) nehmen.

Rantanplan
Verwende lieber Tabellen als display: inline-table;
Mit Tabellen bist du auf der sicheren Seite.
Den display: inline-table; sieht auf den Firefox nicht sonderlich gut aus

stiffler

Danke. Ein ganz großes, dickes Danke an dich. Ich habe es gleich mal konkret umgesetzt: Die zwei Kästen nebeneinander, das bekomme ich wohl noch hin

MacMark

Also ich sehe da einen gravierenden Unterschied, ob man table zum Layouten verwendet, oder display:inline-table. Warum? Ganz einfach: bei table hast du die räumliche Anordnung fest mit dem Inhalt verschweißt, da kannst du noch soviel CSS nehmen (vermute ich mal), das wird sich räumlich nicht mehr anders anzeigen lassen. Bei inline-table hast du ein gewöhnliches div-Element, dem du im CSS sagst, wie es sich räumlich zu verhalten hat. Perfekte Trennung von Inhalt und Layout. Mit table ist Inhalt und Layout verquickt.

Tricky

Ok, ich kucke mir das gleich mal mit FF an.

Hm, ok, mit Firefox unbrauchbar Warum wird der eigentlich immer so gelobt?

Rantanplan
Mit CSS-2 kannst Du jedes Element zur Tabelle machen. In Deinem Fall machst Du einen paragraph zur Inline-Tabelle.

Einer HTML table kannst Du auf ähnliche Weise per CSS ihr Layout zuordnen.

Mehr dazu hier:
www.westciv.com/style_master/academy/css_tutorial/properties/element_type.html

MacMark

Besten Dank für den Link. Ich habs jetzt mit einer Tabelle gelöst, Purismus hin oder her, mir ist das jetzt wurst

Besser so; denn, alles was in CSS mit display und dann irgendwas mit table zu tun hat ist mit zu vielen Browsern inkompatibel …

Vor einiger Zeit hatte Apple einen kleinen Lehrgang für Webseiten-Layout veröffentlicht und schlug ein minimales Grund-Layout mit Tabellen vor, eben gerade um solche Probleme wie das von Rantanplan kompatibel mit allen Browsern lösen zu können. Leider habe ich die URL des Artikels nicht mehr.

Claude
Ich würde andersherum formulieren: Viele Browser, aber vor allem der IE, unterstützen neuere Features aus neueren CSS-Versionen noch nicht.

In solchen Fällen nutze ich halt nur Features, die bereits umgesetzt wurden. Tabellenlayouter ist nämlich noch unter Parkhausblinker

Wie wäre es denn, wenn Du den Text als Fließtext definiert läßt und ihn mit entsprechendem Rahmen versiehst? Also einfach im Text einen weiteren Div-Tag, der Text und nicht Box ist? Den Text kannst Du doch entsprechend mit Rahmen und Hintergrundfarbe definieren...
<br>
<br>Bin gerade im Büro und kann es nicht austesten, aber ich mach das nacher mal.