Div posities variabele hoogte

[snem]

Hey mede webbuilders,

Na al enige uren aan het stoeien te zijn geweest met de posities van divjes, en het zoeken op internet heb ik nogsteeds het probleem waarbij ik mijn divjes niet op de juiste positie krijg, en dat de hoogte van mijn content vak variabel is.

Ik heb ook al wat geprobeerd met tabellen, maar dit heeft ook geen resultaat gegeven.

Hier een afbeelding met wat precies mijn bedoeling is:


Hierbij moeten de 4 vakken die in de hoeken staan 50px breed zijn en 100px hoog. De breedte van de vakken in het midden is dan 900px waarbij de bovenste en onderste vak 50px hoog zijn. De rest moet automatisch in hoogte meerekken wanneer de inhoud van de pagina groter word.

Is er iemand die mij hierbij kan helpen?

Met vriendelijke groet,
Snem

 

[Naarling]

Het is me niet helemaal duidelijk wat je precies wilt. Is het doel van die blokjes alleen maar om het midden op zijn plek te houden of moet daar ook iets in? Als het gewoon om het centrum gaat kun je dat de volgende CSS meegeven.

#centrum{
margin:50px auto; /*geeft 50px marge aan de boven en onderkant (tenzij  het vak minder hoog is dan het scherm, dan zie je onder natuurlijk meer marge)*/
width:900px;
min-height:450px; /*de minimale hoogte van de centrale div*/
}

 

[snem]

Het gaat er hierbij om, dat het middelste vak (het vak waar ook de inhoud van de pagina in komt) een rand krijgt, die door afbeeldingen gevult word.
De buitenste vakken bevatten dus allemaal een andere background-image. Het punt is ook, dat de vakken mekaar niet mogen overlappen, aangezien het half transparante afbeeldingen zijn.

Voor de duidelijkheid.
Het middelste vak is het vak waar de inhoud van de pagina in komt te staan.
De buitenste vakken zijn de vakken voor omranding. (background-images)

Ter aanvulling:
De groente vakken hebben een vast formaat.
De rode vakken hebben alleen een vaste breedte, maar moeten in hoogte variabel blijven.

En elk geval al bedankt voor de reactie

 

[ric0]

Is dit misschien het zelfde probleem als ik had ? http://www.helpmij.nl/forum/showthread.php/570151-ccs-div-size-probleem

 

[snem]

Het komt gedeeltelijk overeen. Mijn probleem is alleen meer dat de buitenste vakken niet de volledige hoogte gebruiken die beschikbaar is.

Hier mijn code:

<div style="position: absolute; width: 1000px; margin-left: -500px; left: 50%; border: 2px solid black; ">
	<div style="width: 50px; height: 100%; float: left;">
		<div style="position: relative; width: 50px; height: 100px; border: 2px solid green;"></div>
		<div style="position: relative; width: 50px; height: 100%; border: 2px solid red;"></div>
		<div style="position: relative; width: 50px; height: 100px; border: 2px solid green;"></div>
	</div>
	<div style="width: 896; height: 100%; float: left;">
		<div style="position: relative; width: 100%; height: 50px; border: 2px solid green;"></div>
		<div style="position: relative; width: 100%; height: 600px; border: 2px solid red;">
		
		Hierin de content van de website
		
		</div>
		<div style="position: relative; width: 100%; height: 50px; border: 2px solid green;"></div>
	</div>
	<div style="width: 50px; height: 100%; float: left;">
		<div style="position: relative; width: 50px; height: 100px; border: 2px solid green;"></div>
		<div style="position: relative; width: 50px; height: 100%; border: 2px solid red;"></div>
		<div style="position: relative; width: 50px; height: 100px; border: 2px solid green;"></div>
	</div>
</div>

Ik heb het vak waar de informatie van de website nu even een vaste hoogte gegeven, ter voorbeeld. Uiteindelijk moet de informatie in de website de hoogte voor dit vak bepalen.

Voor het idee, deze code is voor de test. Alle css moet natuurlijk in een apart bestand komen te staan.