Met 3 divs totale ruimte vullen
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?
Groejes, SanThe.
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.
Gewijzigd op 12/02/2018 16:00:36 door Thomas van den Heuvel
En dat is dus wel de bedoeling.
Als ik het goed begrijp is er altijd een 'hoofd-div' ... en links EN/OF rechts daarvan kan nog een div staan. Correct?
Waarom variëren de linker en rechter div in breedte?
Gewijzigd op 12/02/2018 17:14:28 door Ozzie PHP
Ozzie PHP op 12/02/2018 17:14:17:
Merk op dat je overal 'height' verkeerd spelt.
Is maar een voorbeeld css. Maar ik heb het wel vaker.
Ozzie PHP op 12/02/2018 17:14:17:
Als ik het goed begrijp is er altijd een 'hoofd-div' ... en links EN/OF rechts daarvan kan nog een div staan. Correct?
Ja, en die zit(ten) in een div met een vaste breedte.
Ozzie PHP op 12/02/2018 17:14:17:
Waarom variëren de linker en rechter div in breedte?
Plaatjes met verschillende breedte of niks.
Een alternatief zou in dit geval wellicht een tabel kunnen zijn ;-)
CSS heeft daar trouwens ook opmaak voor: https://www.w3schools.com/cssref/pr_class_display.asp
Wellicht kun je iets met table-cell.
Probeer het eens met een CSS Grid.
https://www.youtube.com/watch?v=txZq7Laz7_4
Gewijzigd op 12/02/2018 18:11:11 door Ward van der Put
- SanThe - op 12/02/2018 17:01:25:
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 :).
Waarom zo neerbuigend? Kom dan zelf met een werkbare oplossing lijkt me.
Voor de rest, zoals Thomas zegt, zou een voorbeeldje handig zijn.
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.
Bedankt voor het meedenken.
SanThe.
Gewijzigd op 12/02/2018 22:39:38 door - SanThe -