[CSS] positionering van divs gaat niet goed

[Schonhose]

Ik maak gebruik van een 3 kolom layout met header en footer. Dit gaat goed wanneer er content in gezet wordt zoals tekst of een tabel.

Echter wanneer ik absolute gepositioneerde divs in de relative gepostioneerde content div plaats dan gaat het gruwelijk fout.

De 3 kolom layout denkt dan dat er geen content in zit en positioneerd de footer boven aan.

relevante CSS:

Cascading Stylesheet:

#c-block {
 width:100%;
 z-index:1;
 background:#6CAAF0;
 color: #000000;
 height:80%;}

#c-col{
 margin:0 142px 0 142px;
 position:relative;
 background:#C0E2FF;
 color: #000000;
 z-index:5;
 border: solid #000000;
 border-width:0 1px;
 }

#ftr {
 width:100%;
 height:35px;
 border: solid #000000; 
 border-width:1px 0;
 background:#6CAAF0;
 color: #000000;
 margin:0;
 }

Dit is de CSS voor de 3 kolom layout met positionering van de middelste contentblock en de contentkolom en de footer.

Dit werkt wanneer er een echt <table> toegevoegd wordt. De footer verhuisd mooi naar de onderkant van de tabel.

Echter, ik wil niet alles met een tabel doen dus ik heb het zoekformulier herschreven waarbij ik 3 divs absoluut naast elkaar positioneer middels onderstaande CSS:

Cascading Stylesheet:

.searchcol1 {
 left:10px;
 width:130px;
 font-size : 14px;
}   

.searchcol2 {
 left:150px;
 width:100px;
}

.searchcol1, .searchcol2 {
 position: absolute; 
 border:0px solid #000;
 background:#C0E2FF;
 top:5px;
}

Het rare is dat wanneer ik deze pagina open in de layout via een include gehandeld wordt alsof er geen content inzit. De footer ligt onder de header en daarover ligt de tabel.

Geen idee waar het aan ligt. Ik was onder de indruk dat de absolute divs voor de tabel de eigenschappen van de relative content kolom zouden overnemen maar dit is niet zo.

[ Voor 6% gewijzigd door Schonhose op 08-05-2004 12:17 ]

[Schonhose]

Ik heb nog wat zitten stoeien met floating divs, maar ook dit werkte niet.

Dus nu heb ik maar even mijn principes opzij gezet en heb de layout maar in een table gezet. Nu werkt het in elk geval....

[Verwijderd]

Dit klinkt als een situatie waarin de wrapper maar 10px oid hoog wordt door de absoluut gepositioneerde inhoud. Dat is meestal op te lossen met een <br style="clear: both;"> onder de absoluut gepositioneerde div, maar ik zal het nog even voor je testen.

[Verwijderd]

Verwijderd schreef op 08 mei 2004 @ 12:22:
Dit klinkt als een situatie waarin de wrapper maar 10px oid hoog wordt door de absoluut gepositioneerde inhoud. Dat is meestal op te lossen met een <br style="clear: both;"> onder de absoluut gepositioneerde div, maar ik zal het nog even voor je testen.

Dat gaat niet werken, dat werkt alleen bij floats.

[Verwijderd]

Verwijderd schreef op 08 mei 2004 @ 12:23:
Dat gaat niet werken, dat werkt alleen bij floats.

Na mijn posts bedacht ik dat ook idd Toch nog even testen op een andere manier.

edit:

Heb je een testcase online?

[ Voor 8% gewijzigd door Verwijderd op 08-05-2004 12:39 ]

[Schonhose]

nee, niet meer, maar ik kan wel even eentje maken snel... even geduld....

[edit]
Nee, niet meer. De CSS file is aangepast en ik heb de oude alleen nog maar als backup op een pc in Utrecht... Zit momenteel in Groningen...

Maar het is al opgelost door het formulier in een table te gooien

[ Voor 65% gewijzigd door Schonhose op 08-05-2004 12:52 ]