De eigenschappen van een element

Inmiddels zijn we al wat bekender met de eigenschappen van elementen zoals Divs. Deze week gaan we wat meer leren over Waarom Divs zich op bepaalde manieren gedragen en wat je kan veranderen om te zorgen dat een element precies staat waar je het wilt hebben.

Display: Block


Een <div> heeft standaard een "block" waarde. Dit zorgt ervoor dat er geen andere elementen naast mogen staan. Als wij bijvoorbeeld twee DIV elementen naast elkaar aanmaken krijg je dit resultaat:

HTML:

<div class="container">
    <div class="box box1">DIV 1</div>
    <div class="box box2">DIV 2</div>
</div>

CSS:

.box{
    width: 10vw;
    height: 10vw;
    color: white;
    font-size: 30px;
    font-weight: bold;
}
.box1{
    background-color: green;
}
.box2{
    background-color: red;
}
DIV 1
DIV 2

Floats

De float eigenschap kunnen wij gebruiken om elementen te laten aansluiten. Houdt er wel rekening mee dat een float gevolgd door een block element kan overlappen:

HTML

<div class="container">
<div class="box box1">DIV 1</div>
<div class="box box2">DIV 2</div>
</div>

CSS

.box{
    width: 10vw;
    height: 10vw;
    color: white;
    font-size: 30px;
    font-weight: bold;
}
.box1{
    background-color: green;
    float: left;
}
.box2{
    background-color: red;
    width: 15vw;
    height: 15vw;
}
DIV 1
DIV 2
Maar als we beide divs naar links floaten sluiten ze netjes aan:

HTML

<div class="container">
    <div class="box box1">DIV 1</div>
    <div class="box box2">DIV 2</div>
</div>

CSS

.box{
    width: 10vw;
    height: 10vw;
    color: white;
    font-size: 30px;
    font-weight: bold;
}
.box1{
    background-color: green;
    float: left;
}
.box2{
    background-color: red;
    float: left;
}
DIV 1
DIV 2