css width en padding

[drecaise]

Het volgende is wat er moet gebeuren: Ik heb een pagina met uiterst links en uiterst rechts een plaatje. Tussen deze plaatjes moet de eigenlijke tekst van de pagina komen. (deze moet dus op alle resoluties de maximale breedte hebben)

Het idee was dat wanneer ik een div zou toevoegen. Hiervan de width op 100% zou zetten en dan een padding zou geven links en rechts, dat de tekst in deze div keurig van de plaatjes af zou blijven.

maar...
De div wordt groter dan 100%. Waardoor ik een horizontale scrollbar krijg en de tekst aan de rechterzijde over het plaatje valt.
Dit had ik niet verwacht omdat de padding immers aan de binnenzijde zit. Het lijkt er dus op dat de width van een element slaat op de grote van het vlak zonder de padding en de border. (Ik dacht dus dat dit altijd tot aan de border was (inclusief de padding).
Dit gedrag zie ik in firefox en IE6. Ik ga er dus maar van uit dat dit conform de specs is.

Maar ik ben nog steeds niet dichter bij een oplossing gekomen... Heeft iemand een idee hoe ik dit oplos met css?
(Ik ben niet geinteresseerd in oplossingen met tabellen, dus als je die in gedachten had dan spaar jezelf de moeite )

[crisp]

in strict compliant mode is width inderdaad inclusief padding en border, in non-IE browsers vaak ook in non-compliant mode.
Oplossing: maak een container van 100% breedte en zet daarin een ander block-level element met margins

[drecaise]

nou breekt m'n klomp... ik heb het al.... ik definieer geen width en het gaat wel goed...

Rest de vraag... hoe werkt dit dan?


(Overigens is m'n html al strict declared dus daar zou de oorzaak niet moeten liggen)

[faabman]

drecaise schreef op 16 april 2004 @ 02:37:
nou breekt m'n klomp... ik heb het al.... ik definieer geen width en het gaat wel goed...

Rest de vraag... hoe werkt dit dan?

een block-level element neemt afaik standaard de maximaal beschikbare breedte aan...

[Verwijderd]

(Overigens is m'n html al strict declared dus daar zou de oorzaak niet moeten liggen)

Dat hangt er maar net vanaf of er nog iets _voor_ de DOCTYPE staat. Zie ook:

• http://annevankesteren.nl/archives/2004/02/box-model
• http://www.hut.fi/u/hsivonen/doctype.html

[drecaise]

ik heb 't even doorgelezen en 't is standards mode op elke browser.


en terug op faabmans opmerking: Het lijkt mij juist dat een element zonder width declared een breedte zou moeten krijgen die wordt bepaald door de breedte van wat er in staat (?)

Weet iemand wat de standaard daarover zegt?

[Verwijderd]

http://www.w3.org/TR/CSS21/visuren.html#q5

In het kort, het klopt. Waar jij het over hebt is een inline, of inline-block element.

[crisp]

een block-level element neemt standaard de beschikbare breedte aan, alleen IE snapt dat niet altijd; ik gebruik daarom regelmatig dit soort constructies:

Cascading Stylesheet:

#blocklevel {
  width: 100%; // voor IE
}
body>#blocklevel {
  width: auto; // voor andere browsers
}

note dat ik IE altijd in quirksmode dwing, standard compliant mode in IE is te beperkt (enkel beschikbaar in IE6) en te buggy.

[ Voor 29% gewijzigd door crisp op 16-04-2004 17:18 ]