Float- / Clear-Problem

[queicherius]

Wie kann ich Elemente mit unterschiedlicher Höhe nebeneinander anordnen?

Element 1 : 200px
Element 2: 100px
Element 3: 150px

Gewünscht:

Element 1 | Element 2
Element 3

Float:

Element 1 | Element 2
            Element 3

Clear kann ich auch nicht verwenden, da das Layout auf float aufbaut und sonst der Inhalt direkt unter die Sidebar verschoben wird...

 

[Maik]

Hi,

moderne Browser unterstützen display:inline-block.

mfg Maik

 

[queicherius]

Ich nehme an, dass man das den alten auch nicht beibringen kann?

Buhu ich hab keine Lust Tabellen zu nutzen

(P.S.: Maik - online... neue Antwort )

EDIT: Übrigens gibt "inline-block" das gleiche Ergebnis wie mit float ?

 

[Maik]

Absolute Positionsangaben hier mal ausgeklammert, stehen dir grundsätzlich neben der float-Eigenschaft, die display-Eigenschaftswerte inline und inline-block zur Verfügung, um Elemente nebeneinander auszurichten.

Welches Problem du damit hast, kann ich nicht nachvollziehen.

mfg Maik

 

[queicherius]

Es wird eben kein Umbruch erstellt (nach Element 2, hier "Hohe Sicherheit")

So wie im Bild sieht es bei

- float
- display: inline
- display: inline-block

aus...

 

[Maik]

Nenn mal bitte den Link, wo dies zu begutachten ist.

Mit dem Bild lässt sich die Ursache für das Problem auch nicht besser nachvollziehen

mfg Maik

 

[queicherius]

http://david-reess.de/features.html

 

[Maik]

Als erstes solltest du mal in deinem Dokument die Anzahl der öffnenden <div>- und schliessenden </div>-Tags miteinander vergleichen. Die sind nämlich nicht deckungsgleich, und vermutlich die Ursache für dein "Float- / Clear-Problem", bei so viel float- und clear-Deklarationen innerhalb eines derzeit vermutlich unerwünschten verschachtelten DIV-Blocks.

Ein Kontrollbesuch beim W3C-Validator ist immer hilfreich, solch mögliche Fehlerquellen im Markup ausschließen zu können:

• [Invalid] Markup Validation of http://david-reess.de/features.html - W3C Markup Validator

Sollte das valide Markup keine Verbesserung zu Tage fördern, empfiehlt es sich in dieser "komplexen" Float-Konstruktion den rechten Spaltenblock .content anstelle von padding-left:255px mit float:right aus seinem normalen Textfluß zu nehmen, und ihn mit seiner entsprechenden Breitenangabe zu versehen. Auf diese Weise taucht beim "Floating & Clearing" innerhalb dieses Blocks auch kein Problem auf.

<div class="columns 2page">

Klassenbezeichner dürfen laut CSS-Spezifikation nicht mit einer Ziffer beginnen. Standardkonforme Browser ignorieren diese, will heißen: sie interpretieren diese Deklarationsblöcke überhaupt nicht im Stylesheet.

Die Namen hinter dem Punkt können Sie frei vergeben, Sie dürfen jedoch

* keine Leerzeichen und deutsche Umlaute enthalten,
* nicht mit einer Ziffer oder einem Bindestrich beginnen
* und sollten keinen Unterstrich enthalten und nicht zu lang sein.

• Quelle: http://de.selfhtml.org/css/formate/zentrale.htm#klassen

mfg Maik

 

[queicherius]

Sollte das valide Markup keine Verbesserung zu Tage fördern, empfiehlt es sich in dieser "komplexen" Float-Konstruktion den rechten Spaltenblock .content anstelle von padding-left:255px mit float:right aus seinem normalen Textfluß zu nehmen, und ihn mit seiner entsprechenden Breitenangabe zu versehen.

Das wars... dann muss ich halt das Layout umschreiben, wenn das einfacher ist

Klassenbezeichner dürfen laut CSS-Spezifikation nicht mit einer Ziffer beginnen. Standardkonforme Browser ignorieren diese, will heißen: sie interpretieren diese Deklarationsblöcke überhaupt nicht im Stylesheet.

Hehe die Klasse hatte ich gar nicht verwendet, aber schon wieder was gelernt

 

[Maik]

Hehe die Klasse hatte ich gar nicht verwendet, aber schon wieder was gelernt

Besser ist - bevor sie im Zuge der kommenden Bauabschnitte in deinem CSS-Code tatsächlich noch zum Einsatz kommt, und du hier anschließend mit einem neuen Problem aufschlägst

mfg Maik