opgelost! div breder door margin

ik heb een div aangemaakt met een margin erin nu wordt op alle browsers de div breder door deze margin ik doe waarschijnlijk iets fout, maar wat? ik dacht dat zo'n margin het zelfde werkte als in een table:( [code:1:f545174cce] .leftright_right { float: left; width: 260px; margin: 10px; text-align: left; padding: 0; }[/code:1:f545174cce]

Daarvoor heb je de [url=http://tantek.com/CSS/Examples/boxmodelhack.html]Box Model Hack[/url] nodig. Jouw CSS zal er zo komen uit te zien met de Box Model Hack geïmplementeerd:[code:1:6e5e3234a1].leftright_right { float: left; margin: 10px; padding: 0; width: 260px; text-align: left; voice-family: ""}""; voice-family: inherit; width: 240px; }[/code:1:6e5e3234a1]

mijn dank is groot ga het eens proberen snap niet wat er nu precies in de code staat 8)

[quote:cf9a7d88a2="diederik"]mijn dank is groot ga het eens proberen snap niet wat er nu precies in de code staat 8)[/quote:cf9a7d88a2]

De Box Model Hack is eigenlijk poepsimpel als je er even bij stilstaat. Alle XHTML-elementen, zowel inline (<a>, <span>, <img>,…) als block-level (<p>, <div>, <h1>,…), bevatten voor CSS een box. Een div bevat bijvoorbeeld tekst. Buiten deze tekst heb je padding. Buiten de padding heb je de border. Buiten de border heb je de margin. Dat zie je hier schematisch:

[img:cf9a7d88a2]http://css.maxdesign.com.au/listamatic/images/boxmodel.gif[/img:cf9a7d88a2]

Wanneer je in CSS een div bijvoorbeeld in jouw geval een breedte geeft van 260px, en een margin van 10px langs alle zijdes, wordt de werkelijke grootte volgens het Box Model 280px:
10px (linkermargin) + 260px (width) + 10px (rechtermargin)

De Box Model geldt zowel voor width als height. Dus als je een border zou geven aan de box (border: 1px solid #333), tel je 2px bij de eigenlijke width (linkerborder + rechterborder). Wanneer je nu een pixelperfect ontwerp moet hebben, en je width maximaal 260px mag zijn (zoals in jouw geval), trek je de margin af van de width:
260px (width) - 10px (linkermargin) - 10px (rechtermargin) = 240px

Nu is het zo dat de box model door Internet Explorer anders wordt geïnterpreteerd dan alle andere browsers. Terwijl het correcte box model margin, padding en border bij de width telt, trekt Internet Explorer het van de width af. Dat verschil in interpretatie counter je met Box Model Hack:[code:1:cf9a7d88a2]div#content
{
width:400px;
margin: 50px;
voice-family: ""}"";
voice-family:inherit;
width:300px;
} [/code:1:cf9a7d88a2]

Internet Explorer stopt met de selector te lezen na voice-family. Voor hem is de eigenlijke breedte van de hele box (margin + padding + border + width) 400px. Hij telt daar 50px linker- en rechtermarge vanaf, en dus blijft er 300px voor je inhoud over. Elke andere (moderne) browser leest verder, en krijgt een width van 300px voor de inhoud. Tel hierbij de 50px linker- en rechtermarge, en ook voor de andere browsers is de totale box dan 400px.

[i:cf9a7d88a2]Voor alle duidelijkheid nog wel even stellen dat het box model ook voor de height geldt. Ik gebruikte hier enkel de width als voorbeeld.[/i:cf9a7d88a2]

ik snap hem :D wederom dank