[css/div]positioning van divs met float en/of relative

[Evertt_IA]

Ik ben bezig met een website en ik heb een heel basic layout gemaakt die er zo uitziet:


Nu ziet dat er allemaal wel aardig uit, maar dat heb ik allemaal met position: absolute gedaan.
Het probleem daarbij is dus dat als ik meer content in een box zet dat die dan wel groter wordt, maar de contentbox daaronder schuift niet mee naar beneden.
Nu had ik dus dingen gehoord over float en daar behoorlijk wat over opgezocht, maar ik kon alleen dingen vinden die niet bij mijn layout pasten. De bedoeling is namelijk dat het menu en de login allebei hun vaste groottes behouden en altijd zover mogelijk (respectievelijk) links en rechts van het scherm zitten. Alleen de boxen in het midden moeten van plaats veranderen afhankelijk van de content die erin zit. Maar hoe doe ik dat met float? Want als je met float en clear gaat werken dan gaat die ook uit de weg voor het menu en de login en projecten en dat moet ik niet hebben. Misschien zou het met float kunnen/moeten, maar ik weet niet wat daar de voor/na-delen van zijn tov float.

Dus kortom: weet iemand ergens een voorbeeldje/tutorialtje waar je dus ziet hoe een contentbox naar beneden schuift als de contentbox daarboven langer wordt...

[Verwijderd]

3 column layout? Probeer google eens.

http://www.pmob.co.uk/temp/3colfixedtest_4.htm

[ Voor 52% gewijzigd door Verwijderd op 22-04-2008 15:34 ]

[TeeDee]

Begin onder andere eens met: http://www.google.com/search?hl=en&q=css+3+column+layout

Vervolgens kan je links en rechts containers aanmaken met een vaste breedte- en hoogte. De middelste column kan je dan gebruiken om losse containers te laten floaten (hoeft nog niets eens eigenlijk) zonder een vaste hoogte mee te laten geven.

[Evertt_IA]

Ik heb nu wat zitten klooien met de broncode van deze pagina:
http://www.pmob.co.uk/temp/min-max-3col.htm
En het lukt me om mijn contentboxen goed in de middelste div te plaatsen, maar nu lukt het me maar niet om de breedtes van de linker en rechter divs te wijzigen, dan gaat die raar doen als ik het probeer.
De linker div moet 167 pixels breed zijn en de rechter 193 pixels.
Nu probeer ik dus voor de linker div alle getallen die 130 zijn te veranderen in 167 en alle getallen van 129 naar 166 en idem met de rechter alleen dan naar 193 en 192, maar dan doet die het bij mij voor geen meter.

Iemand?

[TeeDee]

Slinger eens een testcase online zodat men wat makkelijker kan kijken. Geef meteen ook even aan wat exact niet goed is/gaat.

[Evertt_IA]

Ik hoop dat jullie webservers op jullie pc hebben, want ik heb ff geen php-host.
Kijk anders op usbwebserver.com, maar dat weten jullie wel volgens mij.
Wat er mis gaat is dat als ik de getallen in de css verander op de manier zoals ik in me vorige bericht beschreef dan worden de kolommen niet groter, maar krijg ik wel ineens een horizontale scrollbar omdat blijkbaar aan de rechterkant van de rechterkolom ineens onzichtbaar ruimte in wordt genomen.

http://home.planet.nl/~vanbr116/test-case.zip

[edit] het zou trouwens ook wel fijn zijn als iemand me kon vertellen hoe ik die witte ruimte om mijn contentbox weghaal, ik wil dat die gewoon tegen de borders aanzit.

[ Voor 57% gewijzigd door Evertt_IA op 23-04-2008 17:15 ]

[Evertt_IA]

Ik wil anders best wel mijn router klaarzetten zodat jullie via mijn ip-adres de site kunnen zien, maar ik heb niks van beveiligingen ofzo, dus ik weet niet hoe veilig dat is. XD

[Evertt_IA]

[edit]ff verwijderd

[ Voor 89% gewijzigd door Evertt_IA op 23-04-2008 20:29 ]

[TeeDee]

Ik zou ook even het commentaar lezen in de CSS. (waaronder -3px, -1px etc.)
Als je dan ook nog even nadenkt, en bedenkt dat als je de margins aanpast, dat de min-width voor wrapper geen 770px maar iets anders moet zijn, moet je al heel voor kunnen komen.

doe voortaan ook even je posts editten ipv onnodig kicken.

offtopic:
Voor een testcase zou je ook al voldoende hebben aan je html output, een css en de images. Deze kan je prima op je planet webspace kwijt!

[Evertt_IA]

Eigenlijk was wat ik fout doe niks van wat jij nu noemt.
Ik kom er net achter dat ik gewoon de margins van de outer vergeten was.
Het werkt nu.