[DIV/CSS] Overlapping bij teveel inhoud

[Ebayzo]

Ik heb een probleempje bij de layout van mijn nieuwe site.

Site bestaat uit een aantal div's. Het gedeelte waar de content instaat bestaat uit een DIV met daarin tabellen.

Het probleem zit hem in de DIV aan de linker kant. Als hierin teveel tabellen worden geplaatst zodat hij langer is dan de andere drie gaat hij de content DIV overlappen:


Als de linker of middelste DIV langer is dan de rest rekt de content div wel mee.



Ik gok dat het in de relatieve / absolute positionering zit van de drie DIV's maar krijg het niet opgelost. Heb al op GOT gezocht en op een aantal layout site's maar kan het niet vinden.

Dit is de betreffende CSS code:

Cascading Stylesheet:

#content {
    border-left: 1px solid #000000;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    position: relative;
    left: 40px;
    width: 759px;
    background-color: #00C6FF;
    }

#module_div_links {
    position: absolute;
    top: 5px;
    left: 5px;
    padding-bottom: 5px;
    }

#module_div_midden {
    position: absolute;
    top: 5px;
    left: 230px;
    }

#module_div_rechts {
    position: relative;
    top: 5px;
    left: 553px;
    padding-bottom: 5px;
    }

#content bevat dus de drie #module 's

[ Voor 5% gewijzigd door Ebayzo op 30-09-2004 14:52 ]

[Michali]

De div #module_div_links wordt absoluut ergens geplaatst dus in princiepe zit hij nergens in. Hij heeft verder geen effect op de elementen waar hij in genest zit in het document. (als ik het goed heb iig) Geen eens een stukje html, zodat we kunnen zien hoe dit in elkaar zit.

[BtM909]

Michali schreef op 30 september 2004 @ 15:34:
De div #module_div_links wordt absoluut ergens geplaatst dus in princiepe zit hij nergens in. Hij heeft verder geen effect op de elementen waar hij in genest zit in het document. (als ik het goed heb iig) Geen eens een stukje html, zodat we kunnen zien hoe dit in elkaar zit.

Hoeft niet... Hij is absoluut gepositioneerd in het parent-element (desnoods de body)

[Ebayzo]

Michali schreef op 30 september 2004 @ 15:34:
De div #module_div_links wordt absoluut ergens geplaatst dus in princiepe zit hij nergens in. Hij heeft verder geen effect op de elementen waar hij in genest zit in het document. (als ik het goed heb iig) Geen eens een stukje html, zodat we kunnen zien hoe dit in elkaar zit.

Dan zit daar al een deel van het probleem want die deze drie blokken vallen binnen #content.

code:

<div id="content">
  <div id="module_div_links">
   *hier komt een tabel
  </div>
  <div id="module_div_midden">
   *hier komt een tabel
  </div>
   <div id="module_div_rechts">
  *hier komt een tabel
   </div>               
</div>

Ik kan het natuurlijk oplossen door #content een vaste hoogte mee te geven maar dat vind ik minder netjes. Want vooral de middelste module is variabel qua hoogte wat dus problemen zou kunnen geven.

[ Voor 20% gewijzigd door Ebayzo op 30-09-2004 15:39 ]

[Michali]

je kunt dan denk ik beter met floats werken en de margin goed instellen.

[Ebayzo]

Michali schreef op 30 september 2004 @ 15:39:
je kunt dan denk ik beter met floats werken en de margin goed instellen.

Ik heb nare ervaringen met floats. Maar sta open voor suggesties. Ik moet ze dus allemaal laten floaten en ze dan margins opgeven?
OMG

Het staat gewoon al zoals ik het zou willen...

Tnx voor de tip

Zie alleen dat het niet erg crossbrowser proof is...Mozilla Firefox snapt er nu niets meer van...dat is wel een erg groot nadeel!!

[ Voor 32% gewijzigd door Ebayzo op 30-09-2004 15:48 ]

[Ebayzo]

Ok harstikke vet..hij werkt nu bij IE maar in Mozilla is het een grote ramp! Is het niet mogelijk om het anders op te lossen dan met floats of vaste hoogte van #content?

//edit

Ik heb het volgende gevonden:

code:

#cleardiv {
clear: both;
}

code:

<div id="cleardiv"></div>

Met deze aan het einde van de container werkt het wel in Mozilla...is dit crossbrowser verantwoord?

[ Voor 47% gewijzigd door Ebayzo op 30-09-2004 16:08 ]

[Vinzzz243]

ja, alleen ie5/mac heeft 'echt' problemen met floats
daar wordt namelijk meer gecleared dan nodig is

(als iemand daar een oplossing voor weet, desnoods met ie5mac only hacks, GRAAG )

[ Voor 38% gewijzigd door Vinzzz243 op 30-09-2004 16:18 ]

[BetuweKees]

clearfix?

[Vinzzz243]

IE/Mac Strikes Back?
ze lossen het met javascript op. Voor puristen niet echt de oplossing

[crisp]

IE/Mac is ook gewoon hoogbejaard

[Vinzzz243]

crisp schreef op 30 september 2004 @ 19:03:
IE/Mac is ook gewoon hoogbejaard

Precies, dat er een float niet goed wordt gecleared het zij zo, ik heb me erbij neergelegd. Als er een opdracht komt waarin het nodig is dat het ook goed getoond moet worden in IE/mac, dan komt dat stukje javascript er maar bij.
Tot nog toe, maak ik alles IE5 > , FF, Opera 6 >, Netscape 7> werkt prima met floats

[Ebayzo]

Ja ik maak nu gewoon gebruik van die clear bende. Het werkt goed op IE6 en Mozilla dus goed genoeg voor mij..