Width 100% met een border en floats

[Alfredo]

Om één of andere reden lukt het me niet om twee elementen naast elkaar te positioneren met een float en een totale breedte van 100%, als een van die elementen een border heeft. Firefox en IE drukken het tweede element dan naar beneden, Safari en Opera niet.
Iemand enig idee hoe ik dit kan oplossen?

(even crisp's code gekopieerd)

http://test.dqt.be/htmlstuff/

[BalusC]

Dat komt door de border-left. Voeg een negatieve margin van ter dikte van de border toe.

[crisp]

width is in standards-compliant mode exclusief border en padding (het zogenaamde content-box model). De behaviour die je ziet in Safari en Opera heeft waarschijnlijk te maken met (foutieve) afronding/verdeling.

CSS3's box-sizing kan dit voor je oplossen voor zover ondersteund door browsers.

[ Voor 24% gewijzigd door crisp op 14-12-2008 23:53 ]

[Zillion01]

crisp schreef op zondag 14 december 2008 @ 23:51:
width is in standards-compliant mode exclusief border en padding (het zogenaamde content-box model). De behaviour die je ziet in Safari en Opera heeft waarschijnlijk te maken met (foutieve) afronding/verdeling.

CSS3's box-sizing kan dit voor je oplossen voor zover ondersteund door browsers.

Helaas schiet het niet zo op met CSS3 ondersteuning...

[Alfredo]

Dan is het box-model ons dus compleet verkeerd uitgelegd door de docent.

Maar euhm, ben je zeker dat het de padding en niet de margin is die niet bij de breedte hoort? Als ik een blok een padding-left: 10px; geef, staan de blokjes mooi naast elkaar. Geef ik hem echter margin-left: 10px; dan zet hij ze beide op een andere lijn.

Bedankt voor de oplossing in ieder geval, ik kan weer voort.

EDIT - Op de box model pagina staat echter: The box width is given by the sum of the left and right margins, border, and padding, and the content width.

[ Voor 20% gewijzigd door Alfredo op 15-12-2008 00:38 ]

[crisp]

Alfredo schreef op maandag 15 december 2008 @ 00:34:
Dan is het box-model ons dus compleet verkeerd uitgelegd door de docent.

Dan ging hij misschien nog uit van quirksmode rendering?

EDIT - Op de box model pagina staat echter: The box width is given by the sum of the left and right margins, border, and padding, and the content width.

Ja, de box-width, maar width/height in CSS gaat dus over content-width

[Alfredo]

crisp schreef op maandag 15 december 2008 @ 08:19:
[...]

Dan ging hij misschien nog uit van quirksmode rendering?

Nee, we zijn verplicht om alles standards compliant te laten renderen.

Ja, de box-width, maar width/height in CSS gaat dus over content-width

Ach zo, dat weet ik nu dan ook. Bedankt

[Verwijderd]

In Firefox kun je met FireBug altijd een mooi overzichtje van je box krijgen, met alle dimensies erbij. Ideaal om dit soort dingen mee te debuggen.

[Alfredo]

Dat weet ik. Ik wist ook dat het aan de border lag, alleen niet waarom.