Ik heb een div
.container
{
width : 300px;
heigth : 50px;
}
In deze div komt soms, dus niet altijd links een div
.divlinks
{
float : left;
width : is varierent van 10px tot 100px
heigth : 50px;
}
En soms ook een rechts, dus ook niet altijd
.divrechts
{
float : right;
width : is varierent van 10px tot 100px
heigth : 50px;
}
Nu zoek ik een manier om een derde div altijd passend tussen deze twee anderen in te zetten. Het kan dus zijn dat er alleen een div links in zit, of alleen rechts, of geen enkele, of juist alle twee zoweel links als rechts. Wie weet hier een goede oplossing voor?
Is al weer even dat ik met CSS in de weer ben geweest, maar misschien kun je gebruik maken van de intrinsieke eigenschappen van divs/block level elements:
Een div die niet gefloat wordt neemt altijd de volledige (resterende) ruimte in. Misschien is het wel zaak dat je de gefloate divs eerst in de container zet, en dan pas de resterende div, dus het enige wat je volgens mij hoeft te doen is deze in de juiste volgorde weergeven (eerst de floats, dan de rest). Zodat je browser het rekenwerk eenvoudig kan doen, maar mogelijk is deze volgorde niet eens nodig. Oftewel: hier hoef je eigenlijk niets speciaals voor te doen :p.
Je verhaal klopt, maar als je alle drie de divs een border geeft zitten ze zichtbaar niet tegen elkaar aan. En dat is dus wel de bedoeling.
Dit komt omdat de border (evenals margin) opgeteld wordt bij de breedte van de div, als je allemaal vaste breedtes gebruikt zou je deze border af moeten trekken van de beschikbare breedte anders gaan er dingen overlappen / verschuiven.
Dat gezegd hebbende: mogelijk wordt er ergens een margin overgeerfd, dus het lijkt mij beter om deze expliciet op 0 in te stellen.
En ten slotte: als je wilt dat we je precies geven wat je probeert te bereiken moet je ook precies specificeren wat je wilt hebben :).
Het verhaal van Thomas klopt zoals ik al eerder zei.
Ik had het ook zo gemaakt maar helaas het werkte niet.
Nu heb ik de hele test weggegooid en ben ik opnieuw begonnen.
Tot mijn grote verbazing werkt het nu gewoon wel.
Geen idee wat ik eerst over het hoofd heb gezien.
