login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Div resizen niet mee

Offline tnBloem - 27/06/2010 13:00
Avatar van tnBloemNieuw lid Hallo iedereen.

Voor op de website waar ik nu mee bezig ben moet de "main div" mee schalen met de content!
De content bestaat uit 3 divs die naast elkaar zijn gepositioneerd en daarboven een spacer div zit voor wat afstand met de header.

Mijn probleem is nu dat de main div niet mee schaalt en gelijk na de spacer de footer zet! (de content van de footer staat overigens wel netjes onder de 3 divs.

Het moet dus zijn spacer, 3 divs, footer
maar het is nu spacer footer+3 divs, footer content

Kan iemand me vertellen waarom de achtergrond niet mee schaalt met het de content?

Hier de code:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. div#container {
  2. width				:960px;
  3. height			:auto;
  4. background-color	        :#CCC;
  5. margin			:0px auto;
  6. }
  7.  
  8. div#content_container {
  9. 	width			:900px;
  10. 	height		:auto;
  11. 	background-color	:#FFF;
  12. 	top		        :0px;
  13. 	margin		:0px;
  14. 	padding	        :30px;
  15. 	clear			:both;
  16. 	}
  17.         div.dertigpix_spacer {
  18. 	width				:900px;
  19. 	min-height			:30px;
  20. 	}
  21.                         div#info_image_image_1 { (2 divs naast elkaar)
  22. 			float				:right;
  23. 			width				:400px;
  24. 			height			:180px;
  25. 			}
  26. 			div#info_image_image_2 { (de 3e als laatste)
  27. 			width				:260px;
  28. 			height			:180px;
  29. 			padding			:30px;
  30. 			background-color	        :#000;
  31. 			float				:right;
  32. 			color				:#FFF;
  33. 			}
  34. div#footer_container {
  35. width				:960px;
  36. height			:73px;
  37. background-color	        :#000;
  38. margin			:0px;
  39. font-family			:Arial, Helvetica, sans-serif;
  40. font-size			:14px;
  41. }

alvast bedankt

11 antwoorden

Gesponsorde links
Offline WeedSide - 27/06/2010 13:27
Avatar van WeedSide Nieuw lid Waarschijnlijk moet je % gebruiken.

Greetz WeedSide  
Offline Jelmerholland - 27/06/2010 14:47
Avatar van Jelmerholland PHP beginner Nee, alles in je main div op float:left zetten
Gebruik voortaan de zoek-functie, want bijna elke week geef ik dit antwoord naar iemand toe...

En wat is je css über onoverzichtelijk
Offline ProjectWebdesign - 27/06/2010 15:39
Avatar van ProjectWebdesign Lid Het is zo dat een container div niet mee schaalt als de div's erin een float hebben.
Vaak is de oplossing om onder deze 3 divs een div te zetten die een clear: both; heeft.

Een andere oplossing is om de container div een overflow: auto; te geven. Een van deze 2 fixes is goed.
Mijn voorkeur gaat naar de 2e uit, omdat die toch iets beter werkt. Vooral als je javascript erin gebruikt, dan wil die clear: both; div niet altijd even goed werken in IE.
Offline WouterJ - 27/06/2010 15:49
Avatar van WouterJ HTML gevorderde
Jelmerholland schreef:
Nee, alles in je main div op float:left zetten

ProjectWebdesign schreef:
Het is zo dat een container div niet mee schaalt als de div's erin een float hebben.

Tegenstrijdige feiten hier op het forum.

En nog even een antwoord omdat ik anders weer ruzie krijg met een mod:
Je zet alles behalve de footer in een div. Dan geef je die div position relatieve en het menu geef je een position: absolute; en een height: 100%; mee. De footer geef je een clear: both;. Dan wordt de div die content en menu 'inpakt' lang gerekt als de content verlengt. Het menu pakt dan altijd de bodem van die div en de footer staat altijd onderin.
Offline ProjectWebdesign - 27/06/2010 15:53
Avatar van ProjectWebdesign Lid Dit zijn geen tegenstrijdige feiten. Jelmerholland zegt dat de 3 divs die naast elkaar moeten een float: left; nodig hebben. Dat klopt.
En ik zeg dat de container div daardoor niet mee schaalt. Maar dat probleem kan je oplossen door wat ik hierboven uitleg.

Even voorbeeldje van de content div:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="content">
  2.    <div id="left" style="float: left"></div>
  3.    <div id="middle" style="float: left"></div>
  4.    <div id="right" style="float: left"></div>
  5.    <div style="clear: both"></div>
  6. </div>


Met de code hierboven krijg je 3 divs naast elkaar in de content div en de content div schaalt gewoon mee.
Offline Jelmerholland - 27/06/2010 23:44 (laatste wijziging 27/06/2010 23:45)
Avatar van Jelmerholland PHP beginner omdat je de div content ook op float:left moet zetten. Kijk maar in mijn source
Zie de html pagina én de css

Alles staat in de div met class MainContainer
Maar m'n MainL en MainR staan in de div Main die óók op float left staat. Dan werkt 't gewoon hoor ;) Je werkt alleen met een dubbele div, maar dat doe jij ook 
Offline ProjectWebdesign - 28/06/2010 10:54
Avatar van ProjectWebdesign Lid Ach iedereen heeft zijn eigen manier  
Ik probeer zo min mogelijk met float te werken.

Maar Jelmer's idee kan ook, dus zat manieren om het op te lossen.
Offline WouterJ - 28/06/2010 11:17
Avatar van WouterJ HTML gevorderde
ProjectWebdesign schreef:
Ik probeer zo min mogelijk met float te werken.

Het is juist aan te raden om wel met float te werken.
Als je alles absolute positioneert staat de hele site door de war bij andere resoluties.
Offline ProjectWebdesign - 28/06/2010 11:19
Avatar van ProjectWebdesign Lid Ik werk niet met absolute positionering.
Ik zorg dat me website altijd 950px breed is en dan past die op alle pc schermen.
Verder heb ik dan een container div die 950px breed is en gecentreerd is en daar staat alles in.
Nog nooit problemen gehad met resolutie.
Offline Jelmerholland - 28/06/2010 13:15
Avatar van Jelmerholland PHP beginner Dat is de standaard, iedereen gebruik iets rond de 950 px volgens mij (Ik wel iig)
Maar inderdaad, zat manieren om 't op te lossen, die van PW kende ik nog niet.. clear heb ik nog nooit nodig gehad om de 1 of andere reden ..
Offline ProjectWebdesign - 28/06/2010 13:17
Avatar van ProjectWebdesign Lid clear: both; is eigenlijk een veel voorkomende oplossing om een container div mee te laten resizen als de div's erin een float hebben. Maargoed jij lost dat op door de container div ook een float te geven.
Ikzelf los het tegenwoordig op met overflow: auto; ipv. een div erin met clear: both;
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.213s