Ik heb een probleem. Ik wil binnen een container div twee divs floaten en zorgen dat allebei die divs de helft van de ruimte van de container div in beslag nemen en precies op elkaar aansluiten. De simpele oplossing leek mij als volgt (simpel testje):
Dit werkt tot op zekere hoogte, alleen zodra je je browser window de-maximaliseert en je handmatig de browser gaat resizen zie je in het midden op bepaalde groottes een rood streepje er tussen, dat is dus de container div. Met andere woorden, de twee divs sluiten niet altijd helemaal aan. Ik neem aan dat dit te maken heeft met het feit dat de browser er moeite mee heeft om die 50%/50% layout goed te krijgen op het moment dat de parent div een oneven breedte heeft (want een halve pixel kan natuurlijk niet). Maar dit is wel vervelend want ik wilde die divs wel gaan gebruiken om content in te zetten die precies tegen elkaar geplakt is.
Mijn vraag is dus, hoe splits ik een container div op in twee child divs die samen de volledige breedte van de container div in beslag nemen en elkaar precies in het midden ontmoeten (of net niet precies, zo lang er maar geen gat tussen zit). De enige oplossing die ik kan bedenken is om de linker div op width 50% te zetten en dan tegen de rechter te zeggen "neem alles wat over is" maar helaas lijkt CSS geen remainder property te hebben net zoals in Java gridbaglayouts ofzo. Maar misschien zie ik gewoon iets totaal over het hoofd.
Uiteindelijk wil ik die twee divs ook weer opdelen in twee divs van 50% dus ik zou graag een oplossing of workaround voor dit probleem vinden. En ja, ik weet dat je dit met tables kan doen, maar ik heb enorm veel moeite gedaan om een site design helemaal met CSS te maken dus ik wil nou niet op het laatste moment alsnog met tables de boel weer gaan verpesten (principe kwestie
).
Tenzij het echt niet anders kan natuurlijk. Alvast bedankt.
HTML:
1
2
3
4
| <div style="background-color: #FF0000; height: 150px;"> <div style="background-color: #FFFFFF; float: left; height: 150px; width: 50%; margin: 0px;"></div> <div style="background-color: #C0C0C0; float: right; height: 150px; width: 50%; margin: 0px; clear: right;"></div> </div> |
Dit werkt tot op zekere hoogte, alleen zodra je je browser window de-maximaliseert en je handmatig de browser gaat resizen zie je in het midden op bepaalde groottes een rood streepje er tussen, dat is dus de container div. Met andere woorden, de twee divs sluiten niet altijd helemaal aan. Ik neem aan dat dit te maken heeft met het feit dat de browser er moeite mee heeft om die 50%/50% layout goed te krijgen op het moment dat de parent div een oneven breedte heeft (want een halve pixel kan natuurlijk niet). Maar dit is wel vervelend want ik wilde die divs wel gaan gebruiken om content in te zetten die precies tegen elkaar geplakt is.
Mijn vraag is dus, hoe splits ik een container div op in twee child divs die samen de volledige breedte van de container div in beslag nemen en elkaar precies in het midden ontmoeten (of net niet precies, zo lang er maar geen gat tussen zit). De enige oplossing die ik kan bedenken is om de linker div op width 50% te zetten en dan tegen de rechter te zeggen "neem alles wat over is" maar helaas lijkt CSS geen remainder property te hebben net zoals in Java gridbaglayouts ofzo. Maar misschien zie ik gewoon iets totaal over het hoofd.
Uiteindelijk wil ik die twee divs ook weer opdelen in twee divs van 50% dus ik zou graag een oplossing of workaround voor dit probleem vinden. En ja, ik weet dat je dit met tables kan doen, maar ik heb enorm veel moeite gedaan om een site design helemaal met CSS te maken dus ik wil nou niet op het laatste moment alsnog met tables de boel weer gaan verpesten (principe kwestie
).Tenzij het echt niet anders kan natuurlijk. Alvast bedankt.
[ Voor 3% gewijzigd door ReverendBizarre op 30-04-2006 23:48 ]
:strip_icc():strip_exif()/u/90747/vogelklein.jpg?f=community)
. Met een gelijke en vaste hoogte, echter, kan je gewoon gebruik maken van de eigenschap van één van de twee floats. Als je alleen de linker laat floaten, met 50% breedte, en de rechter div niet, vult deze in principe de rest op.
:strip_exif()/u/53522/crop583d477015a24.gif?f=community)
/u/46804/crop5f989efcbb253.png?f=community)
.