Inline css moet je zo weinig mogelijk gebruiken. het is totaal onoverzichtelijk en onflexibel.
align="center" gebruik je tegenwoordig ook niet meer. In plaats hiervan gebruik je css.
Een goed gebruik is als je float gebruikt om dit dan ook te clearen.
<div id='inhoud'>
<div class="item"></div>
<div class="item"></div>
<!--
als je float gebruikt moet je clearen
kijk maar eens wat er gebeurd als je dit weghaalt
-->
<div class="clear"></div>
</div>
css:
#inhoud {
width: 100%;
background-color:Silver;
/* optioneel als je niet wilt dat de div's onder elkaar komen */
min-width:638px;
}
.item {
border:2px solid #000000;
background-color: red;
float: left;
/*
twee divs hebben een breedte van 300px = 600px
2 divs hebben li en re een border van 2px = 8px =
608 pixels in totaal.
*/
margin: 10px 0;
margin-left:calc((100% - 608px) / 3);
width: 300px;
height: 300px;
}
/*
als je float gebruikt moet je clearen
kijk maar eens wat er gebeurd als je dit weghaalt
*/
.clear {
clear:both;
}
Het gaat er om dat je het gebruikt zodat je later in staat bent om het zelf te maken. speel er eens mee!
Het is niet de achtergrondkleur die veranderd. Het is de #inhoud div (de container) die niet meer meegroeit qua hoogte.
door te clearen zal het parent element dus weer netjes de juiste hoogte aannemen.
calc() gebruik je om iets (in dit geval de margin-left) dynamisch te berekenen.
Omdat je geen dankjewel zegt zoek je het verder maar zelf uit ;-)
