Nieuw lid |
|
Ik probeer een opmaak te maken met divjes, maar er gebeurt iets raars met de opmaak.
Eerst maak ik een div als "container" die de pagina centreert en een rode achtergrondkleur heeft. In deze container plaats ik een div voor de Header die ik met een class een grijze achtergrondkleur geef. Daarna voeg ik twee divjes voor de tekst toe, die wil ik in twee kolommen hebben. Tot zover gaat alles goed.
Nu geef ik de class voor de kolommen een float: left, zodat ze naast elkaar komen te staan. En nu verdwijnt de rode achtergrond van de container!
Waarom gebeurt dit? En wat moet ik doen om de kolommen naast elkaar te zetten en toch de rode achtergrond te behouden?
HTML:
<div class="maincontainer">
<div class="box1">Header</div>
<div class="kolom">Kolom 1</div>
<div class="kolom">Kolom 2</div>
</div>
CSS:
div.maincontainer{
width: 650px;
background-color: red;
margin: 0 auto 0 auto;
padding: 0 30px 0 30px;
}
div.box1{
float: left;
width: 500x;
background-color: #silver;
}
div.kolom{
float: left;
width: 100px;
padding: 20px 6px;
}
|