[CSS] kolommen maken

[martijn2008]

Hallo allemaal,

Ik wil op mijn website 3 kolommen, dat is gelukkig gelukt, maar dat heb ik gedaan met float:left;
dat had als gevolg dat mijn "achtergrond div" niet meer automatisch zich aanpast aan de inhoud. En dat zou heel vervelend zijn, omdat als ik iets toevoeg in een kolom, dat ik dan in css weer de hoogte moet aanpassen. Nu heb ik als voorbeeld wel de hoogte ingesteld, zodat jullie kunnen zien hoe het er uit moet zien:http://99martijn99.110mb.com/linksite/

Cascading Stylesheet:

.bg {
    width:800px;
    height:320px; /*<------- wil ik dus liever NIET!*/
    background-image:url(images/bg.png);
    background-repeat:repeat;
    text-align:left;
}
.header {
    background-image:url(images/bg.png);
    height:150px;
    margin-bottom: 10px;
}
.header h1{
    color:#06F;
    padding:20px;
}
.kolom1 {
    width:250px;
    float:left;
    margin-right: 12px;
    margin-left: 13px;
}
.kolom2 {
    width:250px;
    float:left;
}
.kolom3 {
    width:250px;
    float:left;
    margin-right: 13px;
    margin-left: 12px;
}
.categ {
    width:250px;
    margin-bottom: 10px;
    }
.categ .categheader {
    background-color:#F00;
    }
.categ .categcontent {
    background-color:#FFFFBB;
    }
.footer{
    text-align:center;
    background-image:url(images/footer.png);
    width:800px;
    height:40px;}
p {
    padding:2px;
}

Is de ingekorte versie, voor de volledige versie kijk op: http://99martijn99.110mb.com/linksite/style.css

Ik hoop dat iemand de oplossing heeft, een vriend van me zit met het zelfde probleem.

[SilencerNL]

Zoek eens naar Faux Columns, volgens mij is dat wat je bedoelt.

[RobIII]

Zet een overflow:auto; op je bg div et voila.
Zie ook http://www.quirksmode.org/css/clearing.html (en let even op de IE uitzondering en de oplossing daarvoor)

[ Voor 55% gewijzigd door RobIII op 23-11-2010 19:21 ]

[Verwijderd]

Kom op zeg, er is echt vreselijk veel over dit onderwerp te vinden. Kijk eens naar de clear property en ga voortaan eerst even beter zoeken.

[NMe]

Verwijderd schreef op dinsdag 23 november 2010 @ 19:20:
Kom op zeg, er is echt vreselijk veel over dit onderwerp te vinden. Kijk eens naar de clear property en ga voortaan eerst even beter zoeken.

^^ dat.

Het hele punt van floats is dat ze soort van uit de layout breken en zich op zo'n manier positioneren op een plek dat andere elementen eromheen vallen. Hoe je dat oplost had je met een simpele zoekquery ook op kunnen lossen.

Volgende keer dus iets beter zoeken asjeblieft. Dit topic gaat op slot.

Je hebt trouwens last van divveritus. Niet alles is een div in webdesign. Menu's horen lijsten te zijn, headers horen headers te zijn, enz. Bij jou is alles een div.

[ Voor 11% gewijzigd door NMe op 23-11-2010 19:27 ]