Layout Problem

[Maa]

Guten Abend,

warum rutscht das 3. Div immer in eine neue Spalte? 25+50+25 ist doch 100!

<div style="width: 100%; height: 100px; background-color: #0033FF; color: #FFFFFF;padding: 1em;">
100%<br />
</div>

<div style="float: left; width: 25%; background-color: #0099FF; color: #FFFFFF; height: 100px; padding: 5px;">
25%
</div>

<div style="float: left; width: 50%; background-color: #0099F1; color: #FFFFFF; height: 100px; padding: 5px;">
50%
</div>

<div style="float: left; width: 25%; background-color: #0099f1; color: #FFFFFF; height: 100px; padding: 5px;">
25%
</div>

<div style="clear: left; width: 100%; background-color: #0033FF; color: #FFFFFF; height: 100px; padding: 5px;">
100%
</div>

Danke

[Cheatah]

Hi,

warum rutscht das 3. Div immer in eine neue Spalte? 25+50+25 ist doch 100!

25%+50%+25%+6*5px sind aber mehr als 100%.

Cheatah

[Maa]

25%+50%+25%+6*5px sind aber mehr als 100%.

Was für 6*5 ? Da ist doch nur das Padding. Und das padding ist doch in der Box und nicht außen. Das kann man doch nicht mitzählen.
Das Margin wäre doch in diesem Fall ein Problem oder nicht.

Wenn ich eine box mit 100px Breite habe und diese Box hat 5px padding. Dann ist die Box trotzdem nur 100px breit, dafür habe ich dann innen drin nur 90px Breite platz.

[Cheatah]

Hi,

25%+50%+25%+6*5px sind aber mehr als 100%.
Was für 6*5 ? Da ist doch nur das Padding.

ja, aber wieso "nur"?

Und das padding ist doch in der Box und nicht außen. Das kann man doch nicht mitzählen.

Das kann man nicht nur, sondern muss. Die Eigenschaften "width" und "height" beziehen sich auf die Content-Area, nicht auf die Padding-, Border- oder Margin-Area.

Das Margin wäre doch in diesem Fall ein Problem oder nicht.

Ja, genau wie Border und Padding.

Wenn ich eine box mit 100px Breite habe und diese Box hat 5px padding.

Dann ist sie insgesamt 110px plus Border plus Margin breit.

Cheatah

[Maa]

Das kann man nicht nur, sondern muss. Die Eigenschaften "width" und "height" beziehen sich auf die Content-Area, nicht auf die Padding-, Border- oder Margin-Area.

http://www.w3.org/TR/CSS21/box.html

?? Die Box ist hier doch dargestellt. In dem Bild ist die Box dan Ganze. Die Border ist ja ganz außen und nicht um den Content Bereich.

Muss man das Padding echt mitzählen ? Dann verstehe ich den Unterschied auf einmal nicht mehr zwischen Padding und Margin.

[dbenzhuser]

N'Obend

Muss man das Padding echt mitzählen ? Dann verstehe ich den Unterschied auf einmal nicht mehr zwischen Padding und Margin.

Padding ist innerhalb des Border :)
Mir persönlich kam das alte IE-Box-Model auch logischer vor, aber der Standard sieht es nunmal anders vor.

Beide Box-Model haben ihre Vor- und Nachteile.  Man muss sich halt damit arangieren.

Tschö,
dbenzhuser

[Orlando]

Hi Maa,

25%+50%+25%+6*5px sind aber mehr als 100%.

Was für 6*5 ? Da ist doch nur das Padding. Und das padding ist doch in der Box und nicht außen. Das kann man doch nicht mitzählen.

Genau das ist aber korrekt.

http://www.carsten-protsch.de/zwischennetz/doctype/box_model_bug.html

Das Margin wäre doch in diesem Fall ein Problem oder nicht.

Der wird natürlich ebenso dazugezählt.

Wenn ich eine box mit 100px Breite habe und diese Box hat 5px padding. Dann ist die Box trotzdem nur 100px breit, dafür habe ich dann innen drin nur 90px Breite platz.

Du gehst davon aus, dass die falsche Darstellung des M$IE richtig sei. Das ist nur ein Grund, warum man diesen Schrott nicht ausschließlich zum Testen verwenden sollte.

Grüße,
 Roland

[Maa]

Du gehst davon aus, dass die falsche Darstellung des M$IE richtig sei. Das ist nur ein Grund, warum man diesen Schrott nicht ausschließlich zum Testen verwenden sollte.

Nein, ich benutze ausschließlich Mozilla.
Jetzt bin ich aber platt. Ich arbeite schon seit längerem mit CSS. Auf Jeden Fall lang genug um trotzdemnoch überrascht zu sein.

Aha, deswegen also CSS Bug.

Aber wie soll man das denn nun machen, wenn ich die Breite der DIVs in % angebe. Worauf bezieht sich padding: 2% dann ? Auf die Bildschirmbreite oder die DIV breite die es beschreibt ? Das ist dann ja super kompliziert zu berechnen.

Wie macht man das am besten ?

[Cheatah]

Hi,

Worauf bezieht sich padding: 2% dann ?

warum schaust Du nicht einfach nach, wie's definiert wurde? http://www.w3.org/TR/CSS21/box.html#propdef-padding

Cheatah

[Maa]

Na ja,

also nun verstehe ich es. Bzw. man muss sich ja danach richten. :)

Aber wieso ist meine 2. zeile immer noch nicht 100% breit?
Am rechten Rand sehe ich einen super schmalen weißen Streifen. Als wäre die 2. DIV Reihe 99% breit.

<div style="width: 100%; height: 100px; background-color: #0033FF; color: #FFFFFF; padding:0%; border: 0px;">
100%<br />
</div>

<div style="float: left; width: 25%; background-color: #0099FF; color: #FFFFFF; height: 100px; padding: 0%; border: 0px;">
25%
</div>

<div style="float: left; width: 50%; background-color:#00CCFF; color: #FFFFFF; height: 100px; padding: 0%; border: 0px;">
50%
</div>

<div style="float: left; width: 25%; background-color: #0099f1; color: #FFFFFF; height: 100px; padding: 0%; border: 0px;">
25%
</div>

<div style="clear: left; width: 100%; background-color: #0033FF; color: #FFFFFF; height: 100px; padding: 0%; border: 0px;">
100%
</div>

[Cheatah]

Hi,

Aber wieso ist meine 2. zeile immer noch nicht 100% breit?
Am rechten Rand sehe ich einen super schmalen weißen Streifen.

unabhängig vom Browser oder dessen Fenstergröße? Bei Gecko (ja, tatsächlich!) sind Rundungsfehler bekannt.

Cheatah

[Maa]

unabhängig vom Browser oder dessen Fenstergröße? Bei Gecko (ja, tatsächlich!) sind Rundungsfehler bekannt.

Ja, aber da gibt es nichts zu runden. Es ist doch genau 100%.
Das muss was anderes sein.

[Cheatah]

Hi,

unabhängig vom Browser oder dessen Fenstergröße? Bei Gecko (ja, tatsächlich!) sind Rundungsfehler bekannt.
Ja, aber da gibt es nichts zu runden. Es ist doch genau 100%.

also, 25% sind nach meinem Kenntnisstand nicht genau 100%.

Das muss was anderes sein.

Wenn Du das Phänomen bei allen Browsern und allen Fenstergrößen beobachten kannst, stimme ich Dir zu.

Cheatah

[Maa]

Das gibt es doch nicht. Also ich habe das Seitenlayout schon öfter mit CSS gemacht - ohne Tabellen.

Habe mir das gleiche gerade mal im IE angeschaut. Der schiebt mir das letzte DIV der 2. Zeile in die nächste Zeile.

<body style="margin: 0px;">

<div style="width: 100%; height: 100px; background-color: #0033FF; color: #FFFFFF; padding:0%; border-style: none;">
100%
</div>

<div style="float: left; width: 25%; background-color: #0099FF; color: #FFFFFF; height: 100px; padding: 0%; border-style: none;">

<div style="margin: 2.5%; width: auto; background-color: #00FF66;">sfsdfsdfsdf</div>

</div>

<div style="float: left; width: 50%; background-color:#00CCFF; color: #FFFFFF; height: 100px; padding: 0%; border-style: none;">
50%
</div>

<div style="float: left; width: 25%; background-color: #0099f1; color: #FFFFFF; height: 100px; padding: 0%; border-style: none;">
25%
</div>

<div style="clear: left; width: 100%; background-color: #0033FF; color: #FFFFFF; height: 100px; padding: 0%; border-style: none;">
100%
</div>

Also wie soll man dann einen Seitenlayout machen ohne Tabellen?
Wenn der mir bei 25+50+25 das Ding in die nächste Zeile schiebt ?

Könnte jemand bei sich den obigen Code mal bitte ausprobieren? Ist da etwas was ich blinderweise übersehe ?

Danke

[Cheatah]

Hi,

Habe mir das gleiche gerade mal im IE angeschaut. Der schiebt mir das letzte DIV der 2. Zeile in die nächste Zeile.

das wird der berüchtigte Three-Pixel-Text-Jog oder etwas ähnliches sein. Google mal entsprechend.

Also wie soll man dann einen Seitenlayout machen ohne Tabellen?

So wie Du es machst.

Wenn der mir bei 25+50+25 das Ding in die nächste Zeile schiebt ?

Mal kurz zwischen gefragt: Wie groß ist das mittlere (im Unterschied zu Deiner Angabe), wenn das linke 25% und das rechte 25% groß ist?

Cheatah

[Maa]

Hallo,

das wird der berüchtigte Three-Pixel-Text-Jog oder etwas ähnliches sein. Google mal entsprechend.

OK, werde ich tun. Kann man denn dagegen etwas machen?

Mal kurz zwischen gefragt: Wie groß ist das mittlere (im Unterschied zu Deiner Angabe), wenn das linke 25% und das rechte 25% groß ist?

Wie meinst du das ? Das mittlere ist 50% breit.

[Cheatah]

Hi,

das wird der berüchtigte Three-Pixel-Text-Jog oder etwas ähnliches sein. Google mal entsprechend.
OK, werde ich tun. Kann man denn dagegen etwas machen?

Workarounds zu den meisten Problemen sind bekannt.

Mal kurz zwischen gefragt: Wie groß ist das mittlere (im Unterschied zu Deiner Angabe), wenn das linke 25% und das rechte 25% groß ist?
Wie meinst du das ? Das mittlere ist 50% breit.

Ist es 50% breit, weil Du es sagst - oder wäre es auch so 50% breit?

Cheatah

[Maa]

Ist es 50% breit, weil Du es sagst - oder wäre es auch so 50% breit?

Bitte hör auf in Rätseln zu sprechen. Du hast wahrscheinlich mehr Erfahrung als ich. Bitte sag es mir.

Ich habe es doch auf 50% gesetzt. Folglich sollte es doch 50% sein.

[Maa]

Also muss man dann wieder auf Tabellen umsteigen, um das Problem zu umgehen?

Sie Siemens Seite z.B. hat keinen Rundungsfehler mit Tabellen.

http://www.siemens.de/index.jsp

[Cheatah]

Hi,

Also muss man dann wieder auf Tabellen umsteigen, um das Problem zu umgehen?

*DEFINITIV* *UNTER* *KEINEN* *NOCH* *SO* *WIRREN* *UMSTÄNDEN* *!*

Cheatah

[Maa]

*DEFINITIV* *UNTER* *KEINEN* *NOCH* *SO* *WIRREN* *UMSTÄNDEN* *!*

Aber wie denn dann ?

[Cheatah]

Hi,

*DEFINITIV* *UNTER* *KEINEN* *NOCH* *SO* *WIRREN* *UMSTÄNDEN* *!*
Aber wie denn dann ?

mit semantischem Markup und CSS. Es existiert kein Grund, beim Auftauchen winziger Probleme die Schotten dicht zu machen und sich zurück in die Steinzeit zu begeben.

Cheatah

[Cheatah]

Hi,

Bitte hör auf in Rätseln zu sprechen.

nein.

Ich habe es doch auf 50% gesetzt. Folglich sollte es doch 50% sein.

Ja. Aber sind 50% das, was neben den zwei Mal 25% wirklich verbleiben? Wie viel würden genommen werden, wenn Du _nicht_ exakt 50% veranschlagst?

Cheatah

[Ingo Turski]

Hi,
ein paar kleine Tips, damit Du nicht verzweifelt aufgibst..;-)

<body style="margin: 0px;">

Manche Browser setzen hier auch ein padding und andere geben HTML ein padding.

<div style="width: 100%;

das kannst - und solltest - Du Dir sparen. Ein blocklevel-Element nimmt automatisch die gesamte Breite ein.

<div style="margin: 2.5%; width: auto; background-color: #00FF66;">sfsdfsdfsdf</div>

wozu setzt Du dieses DIV ein? Auto ist die Voreinstellung, also der verfügbare Platz - nur ist ja keiner mehr verfügbar.

<div style="float: left; width: 50%;

hier könntest Du Deine Probleme beheben, wenn Du Cheatahs Hinweis verstehen würdest. Ist aber wohl etwasa zu hoch..;-) Daher der Tip:

• Du mußt nicht _alle_ Elemente floaten lassen
• dieses Element würde sich anbieten, im Textfluß zu lassen; dann bauchst Du auch _keine_ Weite anzugeben
• allerdings müßte dieses Element dann am Schluß im Quelltext stehen und dieses

<div style="float: left; width: 25%; background-color: #0099f1; color: #FFFFFF; height: 100px; padding: 0%; border-style: none;">

sollte dann rechts floaten.

freundliche Grüße
Ingo

[Marc]

Moin moin

<div style="width: 100%;
das kannst - und solltest - Du Dir sparen. Ein blocklevel-Element nimmt automatisch die gesamte Breite ein.

Nur wenn so viel Inhalt drin ist, dass die gesamte Breite benötigt wird...

Gruß,
Marc.

[Cheatah]

Hi,

Ein blocklevel-Element nimmt automatisch die gesamte Breite ein.
Nur wenn so viel Inhalt drin ist, dass die gesamte Breite benötigt wird...

nein. Was Du meinst, ist die Höhe.

Cheatah

[Maa]

Hallo,

<div style="float: left; width: 50%;
hier könntest Du Deine Probleme beheben, wenn Du Cheatahs Hinweis verstehen würdest. Ist aber wohl etwasa zu hoch..;-) Daher der Tip:

• Du mußt nicht _alle_ Elemente floaten lassen
• dieses Element würde sich anbieten, im Textfluß zu lassen; dann bauchst Du auch _keine_ Weite anzugeben
• allerdings müßte dieses Element dann am Schluß im Quelltext stehen und dieses

Könntest du mir mal meinen Quelltext abändern, so dass ich ein Beispiel habe, dass ich studieren kann?

[Ingo Turski]

Hi,

Könntest du mir mal meinen Quelltext abändern, so dass ich ein Beispiel habe, dass ich studieren kann?

könntest Du nicht zunächst versuchen, meine doch recht ausführlichen Tips umzusetzen und - wenn's nicht klappt - Deinen Versuch hier posten?
Aber nochmal zum Verständnis skizziert:
linkes Element links floatend --- rechtes Element rechts floatend --- mittleres Element ohne float und ohne width und dafür mit margin-left und margin-right auf Abstand zu den Randelementen gebracht.
freundliche Grüße
Ingo