div mee laten rekken met andere div

[axisrules]

hallo allemaal.

Ik ben bezig met een site en het gaat prima behalve 1 ding.
ik zal het proberen te visualiseren met een eenvoudige paintplaatje en bijschriften.

de siteopbouw bestaat uit een container (blauw) en 2 div's (rood)
de 2 rode divs zitten in de blauwe div.

Als de inhoud van de 2 div's leeg zijn, is de container groot genoeg om de scherm te vullen maar niet groot genoeg om te moeten scrollen (min-height).
(niks aan de hand.jpeg)

maar als 1 van de div's (rood) te groot wordt, dan komt het over de container.
(fout.jpeg)

hoe kan ik er voor zorgen dat de container mee rekt met de div (rood)
(dit wil ik hebben.jpeg)

hieronder hoe de pagina en css er uit zien.

html

<div id="container">
<div id="bovenstuk"></div>
  <div id="home_links">
    <p>hier komt de introductie</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ante sed   enim lacinia mattis vitae eu nisi. Integer quis lorem purus, sed   scelerisque justo. Aliquam vel  orci, sit amet varius nulla congue acus, sed   scelerisque justo. Aliquam vel ligula risus. Donec sem diam, sagittis id   malesuada id, placerat ac nulla. Nullam at augue orci. Donec sit amet   blandit eros. Suspendisse aliquet, erat et faucibus fringilla, enim nisl   luctus sapien, at rutrum quam augue in tortor. Nam arcu ante, feugiat   non tempus id, pulvinar quis lectus. Morbi eget libero nisl. Phasellus   hendrerit mattis orci, sit amet varius nulla congue ac</p>
  </div>
  
  <div id="home_rechts">
    <p>Hier komt maandmenu</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et ante sed   enim lacinia mattis vitae eu nisi. Integer quis lorem purus, sed   scelerisque justo. Aliquam vel ligula risus. Donec sem diam, sagittis id   malesuada id, placerat ac nulla. Nullam at augue orci. Donec sit amet   blandit eros. Suspendisse aliquet, erat et faucibus fringilla, enim nisl   luctus sapien, at rutrum quam augue in tortor. Nam arcu ante, feugiat   non tempus id, pulvinar quis lectus. Morbi eget libero nisl. Phasellus   hendrerit mattis orci, sit amet varius nulla congue ac</p>
  </div>
  <div id="onderstuk"></div>
</div>

css

#container {
	width: 960px;
	z-index: 3;
	position: absolute;
	margin-left: -480px; 
	left: 50%;
	top: 150px;
	background-image: url(images/middenstuk.gif);
	min-height: 60%;
}

#home_links {
	position: absolute;
	height: auto;
	width: 420px;
	left: 0px;
	background-image: none;
	background-repeat: repeat;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
}

#home_rechts {
	height: auto;
	width: 420px;
	position: absolute;
	left: 960px;
	margin-left: -450px;
	padding-top: 0px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
}

alvast bedankt!

Mvg.

 

[DJ14]

Voeg in het css bestand bij #container gewoon height:100% toe als simpele oplossing, er bestaan ook nog javascriptjes om de hoogte van de ene div te pakken en deze te gebruiken voor de hoogte van de andere div.

 

[axisrules]

Voeg in het css bestand bij #container gewoon height:100% toe als simpele oplossing, er bestaan ook nog javascriptjes om de hoogte van de ene div te pakken en deze te gebruiken voor de hoogte van de andere div.

Dat had ik in de eerste instantie gedaan.

gevolg is dat het mijn eerste probleem niet oplost.
Maar ook op pagina's waar alles goed was, voor problemen zorgt.

index (tekst komt over container heen
menu: container is nu zo groot dat je onnodig moet scrollen

mijn probleem komt dus weer terug: de div container rekt niet mee met de andere div die erin zit.

alvast bedankt!

 

[Naarling]

Voeg in het css bestand bij #container gewoon height:100% toe als simpele oplossing, er bestaan ook nog javascriptjes om de hoogte van de ene div te pakken en deze te gebruiken voor de hoogte van de andere div.

Die 100% gaat niet werken hoor, en javascript voor de layout gebruiken is meestal niet wenselijk en in dit geval totaal onnodig.

Als je de hoogte van de container verwijdert en aan de #home_links position:relative; en float:left; meegeeft dan moet het goedkomen.
EDIT: niet als de rechtertekst langer is trouwens.

 

[axisrules]

Die 100% gaat niet werken hoor, en javascript voor de layout gebruiken is meestal niet wenselijk en in dit geval totaal onnodig.

Als je de hoogte van de container verwijdert en aan de #home_links position:relative; en float:left; meegeeft dan moet het goedkomen.
EDIT: niet als de rechtertekst langer is trouwens.

Dit stuk heeft gewerkt! bedankt Naarling!

even voor de duidelijkheid: om te zorgen dat container meegaat met andere divs, moet ik de andere divs allemaal relative en float left meegeven?

ik zou zelf nooit aan hebben gedacht (zit al 2 dagen te *****n met de container css dan met de andere divs.

@DJ14: ik heb de java script niet gebruikt maar bedankt voor de moeite.

dit topic is opgelost.

 

[Naarling]

even voor de duidelijkheid: om te zorgen dat container meegaat met andere divs, moet ik de andere divs allemaal relative en float left meegeven?

Of je ze naar links of naar rechts moet laten drijven hangt er van af, het belangrijkste is dat elementen met position:absolute; uit de normale 'stroom' van elementen worden gerukt, de elementen waar ze in zitten zullen er dan ook niet netjes omheen lopen maar er soms dwars doorheen gaan.

EDIT: Doordat zo'n beetje al jouw elementen position:absolute; hebben is het allemaal wat lastig. Een betere maniier om je site te centreren is om aan de container margin:0 auto; mee te geven.

 

[csshunter]

Ja, weg met al die absolute posities!
De linkerkolom naar links laten drijven, de rechterkolom naar rechts, en eronder een "clearing" <div>'je. Klaar!

• Hier is je css-modelletje.

Meteen even aangepakt:

• de rechtgehoekte header;
• logo-img kleiner gemaakt;
• background-img iets meer contrast gegeven;
• alle hoekjes in één img gezet, en met background-position telkens het nodige gedeelte opgevraagd;
• het menu in een ordelijk ongeordende list gezet.

Zie verder de broncode. "Zijn er nog vragen?"

Met vriendelijke groet,
CSShunter