login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Opmaak van een div verdwijnt als de "dochter-div" een float krijgt (Opgelost)

Offline Corine - 02/07/2008 23:28 (laatste wijziging 02/07/2008 23:36)
Avatar van CorineNieuw 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;
}

2 antwoorden

Gesponsorde links
Offline Nanon - 03/07/2008 06:57
Avatar van Nanon PHP interesse HTML:
<div class="maincontainer">
<div class="box1">Header</div>
<div class="kolom">Kolom 1</div>
<div class="kolom">Kolom 2</div>
<div class="clear"></div>
</div>

CSS (moet erbij):
.clear {
clear: both;
overflow: hidden;
}

Átlijd even je een clear doen nadat je spul heb gefloat.
Offline Corine - 03/07/2008 20:30
Avatar van Corine Nieuw lid Het werkt inderdaad, bedankt!
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.156s