Inline-block und Prozentangaben

[Yankee Doodle Jack]

Hallo,
wenn ich für inline-block-Elemente fixe Breitenangaben setze (z.B. width: 20rem;), so werden sie nebeneinander (eben 'inline') dargestellt, wenn ich hingegen Prozentangaben (z.B. width: 50%;) ausweise, so verharren die Elemente untereinander und füllen nur die angegebenen Prozente des Bildschirms aus, wohingegen sich float-Elemente sehr wohl nebeneinander anordnen.

Wieso ist das eigentlich so?

...und lassen sich mit Prozentangaben ausgewiesene inline-block-Elemente nur durch float dazu bewegen, sich nebeneinander anzuordnen (wobei ich hier dann ganz provokant die Sinnfrage nach inline-block stelle)?

LG,
YDJ.

[JürgenB]

Hallo,

hast du es schon mal mit weniger als 50% ausprobiert? Evtl. sind da noch Margins oder Paddings, die dafür sorgen, dass dir weniger als 100% zur Verfügung stehen.

Gruß, Jürgen

[ChrisB]

Hi,

wenn ich für inline-block-Elemente fixe Breitenangaben setze (z.B. width: 20rem;), so werden sie nebeneinander (eben 'inline') dargestellt, wenn ich hingegen Prozentangaben (z.B. width: 50%;) ausweise, so verharren die Elemente untereinander und füllen nur die angegebenen Prozente des Bildschirms aus, wohingegen sich float-Elemente sehr wohl nebeneinander anordnen.

Wieso ist das eigentlich so?

Vermutlich wegen dem ein Leerzeichen breit dargestellten Whitespace, der sich zwischen deinen Elementen befindet – und der zwei mal 50 Prozent plus eben diesem Whitespace zu mehr als 100 Prozent summieren lässt.

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

...und lassen sich mit Prozentangaben ausgewiesene inline-block-Elemente nur durch float dazu bewegen, sich nebeneinander anzuordnen

Nein, natürlich nicht.

(wobei ich hier dann ganz provokant die Sinnfrage nach inline-block stelle)?

Float und inline-block sind zwei vollkommen verschiedene Paar Schuhe (auch wenn sich damit teilweise ähnliche *Effekte* erreichen lassen).

MfG ChrisB

[Yankee Doodle Jack]

...Nachtrag:

nachdem ich hier einige Verwirrung gestiftet habe :) :

mir ist jetzt der Kern des Problems klar: inline-block Elemente werden "nach innen" (wie das der Name ja schon andeutet) als block-Elemente dargestellt, wodurch sie für Mediaqueries wie max-width: 50%; offensichtlich unempfänglich sind und die 50% der Bildschirmbreite per default darstellen, wohingegen float in diesem Fall gegen die 50% STREBT (diese aber, wie hier ja schon richtig bemerkt wurde, durch paddings / margins nie wirklich erreicht). Insofern scheinen mir inline-block-Elemente für responsive-Websites weniger gut geeignet (...oder?).

Bitte korrigiert mich, sollte ich da einem Irrtum unterliegen.

[ChrisB]

Hi,

mir ist jetzt der Kern des Problems klar: inline-block Elemente werden "nach innen" (wie das der Name ja schon andeutet) als block-Elemente dargestellt, wodurch sie für Mediaqueries wie max-width: 50%; offensichtlich unempfänglich sind

Nein.

und die 50% der Bildschirmbreite per default darstellen, wohingegen float in diesem Fall gegen die 50% STREBT

Worauf sich Breitenangaben beziehen, kommt in erster Linie auf den Block Formatting Context an.

(diese aber, wie hier ja schon richtig bemerkt wurde, durch paddings / margins nie wirklich erreicht).

Auch wieder so nicht richtig.

Insofern scheinen mir inline-block-Elemente für responsive-Websites weniger gut geeignet (...oder?).

Oder.

Bitte korrigiert mich, sollte ich da einem Irrtum unterliegen.

Vielleicht fängst du besser mal mit ein bisschen Grundlagen an. Dieser Artikel ist hinsichtlich Floating recht umfangreich und erklärt eigentlich alles Wissenswerte:
SELFHTML Weblog: Grundlagen für Spaltenlayout mit CSS

MfG ChrisB