login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Floated divs centreren (Opgelost)

Offline Dlol - 25/11/2010 17:17
Avatar van DlolLid Hallo,

Ik zit met een probleem dat op zich vrij simpel is, maar om de een of andere reden kan ik hier maar geen oplossing voor bedenken.

Om het uit te leggen heb ik snel even iets gemaakt in paint:
http://img193.i...bleemz.png

Het zit dus zo:

Op een pagina heb ik een 'container' (div) gecentreerd staan (zwarte div op de afbeelding). Hierin zitten allemaal 'boxes' (rode divs op de afbeelding) met width: 0. Als er nu iets gebeurt, dan moet de grootte van een van de rode divs veranderen, maar hij moet gecentreerd blijven in de container. Als er nog iets gebeurt, moet een andere rode div groeien, maar moeten ze allebei in hun geheel gecentreerd blijven en zo voort.
Voor het groeien heb ik een javascriptje geschreven dat simpelweg de width vergroot. Niet veel aan dus. Het probleem zit 'm nu in het feit dat de gegroeide divs gecentreerd moeten blijven.

Wat ik al heb geprobeerd:
- Alle 'boxes' gewoon als div in de container gezet. Het probleem is hier dat er by default een linebreak wordt toegevoegd, wat dus niet het gewenste effect geeft.
- Het probleem van de linebreak dacht ik op te lossen door alle rode divs float: left; mee te geven. Dit lost ook niets op omdat de boxes dan wel naast elkaar staan ipv onder elkaar, maar ze zijn niet meer gecentreerd. Float: center; blijkt niet te bestaan helaas...
- Goed, dan maar van de rode divs spans maken, hierna is er immers geen linebreak. Maar blijkbaar is het onmogelijk on van inline elementen de width te veranderen.
- Ik dacht dan de oplossing gevonden te hebben in dipslay: inline-block; maar helaas werkt dit niet in IE, en bij het groeien verplaatst hij mijn divs ongeveer 10pixels naar onder.

Niets van dit alles werkt dus, terwijl dit probleem heel simpel is. Is het nu echt zo dat browsers dit niet kunnen? Dat zou wel enorm stom zijn... Kent iemand hier een oplossing voor?


Enorm veel dank!

2 antwoorden

Gesponsorde links
Offline Martijn - 25/11/2010 19:06 (laatste wijziging 25/11/2010 19:07)
Avatar van Martijn Crew PHP simpel 

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="wrapper" style="position: relative; margin: 0px auto;">
  2. <!-- De 'wrapper' div zal altijd in het midden staan -->
  3.     <div style="display: inline-block; width: 100px;"> klein</div>
  4.  
  5.     <div style="display: inline-block; width: 100px;"> klein</div>
  6.  
  7.     <div style="display: inline-block; width: 500px;"> groot</div>
  8.  
  9.     <div style="display: inline-block; width: 100px;"> klein</div>
  10.  
  11. </div>


uit mn hoofd, kan dingetje vergeten zijn. Als je online hebt staan en dit werkt niet moet je t ff zetten.

edit: nu k je ding wat beter las, je probleem is de float, mijn inline-block doet ongeveer hetzelfde. een span is inline, een div is block. Block zal alter een newline beginnen. inline kan geen width krijgen, hence inline-block
Bedankt door: Dlol
Offline Dlol - 25/11/2010 20:17
Avatar van Dlol Lid Bedankt voor de reactie, maar dit zou niet gewerkt hebben geloof ik, aangezien er iets mis was met display: inline-block. Dat werkte niet goed samen met JavaScript om de een of andere duistere reden...
Maar ik heb het ondertussen anders en drastischer opgelost. De grote container verandert nu samen met de 'boxes' van grootte. Het is niet zo'n elegante oplossing als ik gehoopt had, maar goed, het werkt nu wel cross-browser. In ieder geval toch bedankt voor de reactie 
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.167s