Padding, Margin und width: 100%

[Rodney2k]

Hallo Leute,

ich habe folgendes Problem:
Wie kann ich ein DIV dazu bringen den vollen verfügbaren Platz in der Breite einzunehmen?

Der Hintergrund ist der, dass es ein Container-DIV gibt, welches ein Padding von meinetwegen 5px gesetzt hat. Wenn ich jetzt darin ein neues DIV erstelle, mit der Breitenangabe 100%, dann geht dieses über das Container-DIV hinaus.

Wie kann ich unabhäng von den äußeren Faktoren, also Padding, Margin und meinetwegen auch Border-Width dafür sorgen, dass die volle Breite ausgenutzt wird? Wenn ein äußeres Padding da ist, soll dieses natürlich akzeptiert werden, ich mache die Breitenangabe schließlich prozentual, also relativ.

 

[Efchen]

Wie kann ich ein DIV dazu bringen den vollen verfügbaren Platz in der Breite einzunehmen?

<div> ist ein Block-Element. Das, was Du beschreibst, ist das normale Verhalten eines Block-Elements. Es nimmt immer die volle, verfügbare Breite ein. Wenn Du es ihm nicht anders sagst.

Der Hintergrund ist der, dass es ein Container-DIV gibt, welches ein Padding von meinetwegen 5px gesetzt hat. Wenn ich jetzt darin ein neues DIV erstelle, mit der Breitenangabe 100%, dann geht dieses über das Container-DIV hinaus.

Ohne das jetzt auszuprobieren: padding(-eft/-right) zählt zur Breite mit dazu. width:100% besagt, width ist so breit, wie das Elternelement.

Wie kann ich unabhäng von den äußeren Faktoren, also Padding, Margin und meinetwegen auch Border-Width dafür sorgen, dass die volle Breite ausgenutzt wird?

Keine width setzen.

Gruß,
-Efchen

 

[Rodney2k]

Ok, bei DIVs hast du natürlich Recht, die ziehen sich genauso wie auch Fieldsets auf die korrekte Breite, ganz ohne Angabe.

Wie sieht es aber dann mit Input-Controls (Textboxen) aus, die über die volle Breite gezogen werden sollen.
Ich habe ein DIV mit einem Padding von 5px und möchte darin eine komplett (bis ans Padding heran) ausfüllende Textbox haben.

 

[Efchen]

Ok, bei DIVs hast du natürlich Recht, die ziehen sich genauso wie auch Fieldsets auf die korrekte Breite, ganz ohne Angabe.

Genau, wie bei jedem anderen Block-Element auch.

Wie sieht es aber dann mit Input-Controls (Textboxen) aus, die über die volle Breite gezogen werden sollen.

width:100%; setzt die Breite des Eingabefeldes auf 100% der Breite des Elternelements.

Ich habe ein DIV mit einem Padding von 5px und möchte darin eine komplett (bis ans Padding heran) ausfüllende Textbox haben.

Na hoffentlich ist außer der Textbox noch was anderes drin, damit das div, das dem Gruppieren mehrerer Elemente dient, hier auch richtig angebracht ist :-)

Gruß,
-Efchen

 

[Rodney2k]

Na hoffentlich ist außer der Textbox noch was anderes drin, damit das div, das dem Gruppieren mehrerer Elemente dient, hier auch richtig angebracht ist :-)

Ja da ist noch etwas anderes drin, warum sollte ich sonst auch ein div verwenden. Meine Frage hast du damit aber nicht beantwortet ;)

 

[Efchen]

Meine Frage hast du damit aber nicht beantwortet ;)

Nein? Was fehlt denn noch?

 

[Rodney2k]

Nein? Was fehlt denn noch?

Wie löse ich das Problem, wenn es ein Padding gibt?
Ich habe also ein DIV welches einen Bereich ausfüllt, mit einem bestimmten Padding. Wenn ich darin eine Textbox auf die gesamte Breite, eben bis zu den Padding-Grenzen ausfüllen will, dann funktioniert das nicht mit width: 100%, da er so ja das Padding missachtet, sprich sich nach rechts über das DIV ausbreitet.

 

[Efchen]

Wenn ich darin eine Textbox auf die gesamte Breite, eben bis zu den Padding-Grenzen ausfüllen will, dann funktioniert das nicht mit width: 100%, da er so ja das Padding missachtet, sprich sich nach rechts über das DIV ausbreitet.

Nö. Dann hat Dein Browser einen Bug oder Du arbeitest im Quirks Mode, verwendest also einen ungeeigneten Doctype.

Ob sich Dein Browser im Quirks Mode oder im Standards Mode befindet, siehst DU auf der folgenden Übersicht:
LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Gruß,
-Efchen