div-alignment main layout pagina

[bvp]

Goedemiddag,

Ik wil een nieuwe website layout maken, opgebouwd uit div elementen.
Na redelijk wat gelezen te hebben over verschillende positions e.d. ben ik tot het volgende gekomen:

HTML:

<style type="text/css">
body {
    margin              : 0px;
    padding             : 0px;
}

.topBanner {
    width               : 100%;
    height              : 65px;
    background-color    : blue;
}

.topNavigation {
    width               : 100%;
    height              : 21px;
    background-color    : green;
}

.sideNavigation {
    width               : 200px;
    height              : 100%;
    background-color    : red;
    top                 : 0px;
}

.main {
    position            : absolute;
    top                 : 86px;
    left                : 200px;
    width               : 100%;
    height              : 100%;
    background-color    : grey;
}
</style>

<div class="topBanner"></div>
<div class="topNavigation"></div>
<div class="sideNavigation"></div>
<div class="main"></div>

Dit is ongeveer wat ik wil maar klopt nog niet helemaal.
De sideNavigation loopt onder namelijk door, door de 100% height en de main aan de onderkant en aan de rechterkant.
Nu had ik ergens gelezen om op het body-element dan overflow: hidden te gebruiken.
Het nadeel is dan weer dat als de main content of de sidenavigation hoger wordt het scrollen weer niet helemaal goed gaat (ook bij overflow: auto op het main element niet).
Wat ik hier dus zou willen is dat als of de sideNavigation of de main content hoger wordt dan de pagina dat er dan alleen aan de rechterkant een scrollbalk komt.
Dit heb ik ook al geprobeerd met een overkoepelende div, maar dat heeft ook niet helemaal gewerkt.

Iemand ideeën wat ik over het hoofd zie?

[Bosmonster]

Laat het position absolute vallen en float die container er gewoon naast.

[bvp]

Bosmonster schreef op maandag 07 december 2009 @ 11:58:
Laat het position absolute vallen en float die container er gewoon naast.

Dat werkt niet, dan wordt die automatisch onder de rode sideNavigation-div geplaatst.

[Bosmonster]

bvp schreef op maandag 07 december 2009 @ 12:11:
[...]


Dat werkt niet, dan wordt die automatisch onder de rode sideNavigation-div geplaatst.

"dat werkt niet" en "dat lukt me niet" zijn twee hele verschillende dingen.

Als je ze beiden left float komen ze gewoon naast elkaar.

Verder is het me niet zo duidelijk wat je doel precies is (welke layout wil je bereiken?). Het is nu lastig om concrete tips te geven over hoe dat te bereiken.

[ Voor 27% gewijzigd door Bosmonster op 07-12-2009 12:27 ]

[ReseTTim]

bvp schreef op maandag 07 december 2009 @ 12:11:

Dat werkt niet, dan wordt die automatisch onder de rode sideNavigation-div geplaatst.

float dmv left en right lukt wel.. echter je moet de breedte percentage minder breed zetten

het is mij in iedergeval al gelukt

[bvp]

ReseTTim schreef op maandag 07 december 2009 @ 12:33:
[...]


float dmv left en right lukt wel.. echter je moet de breedte percentage minder breed zetten

het is mij in iedergeval al gelukt

Ah ok, dat werkt idd wel, dan komt ie er netjes naast
Probleem is nu alleen dat het main-stuk niet de rest van de pagina bevat.

@ Bosmonster, thnx misschien ff ter verduidelijking een omschrijving van wat ik wil. Voor mezelf is dit idd wel duidelijk maar anderen kunnen dit niet zomaar raden idd

De topBanner wil ik dus over een gehele breedte van 100% en een vaste hoogte van 65px.
De topNavigation wil ik ook 100% breedte en hoogte van 21 px.
Sidenavigation wil ik een vaste breedte van 200px en de hoogte moet de rest van de pagina zijn.
De main moet dus gewoon alles zijn wat er over blijft.

Als de Sidenavigation of de main hoger wordt dan de rest van de pagina, dan moet er alleen aan de rechterkant een scrollbalk komen, onder het menu.

[ReseTTim]

psst

HTML:

.sideNavigation {
    float: left;
    width                : 200px;
    height                : 100%;
    background-color    : red;
    top                    : 0px;
}

.main {
    float               : right;
    width                : 87%;
    height                : 100%;
    background-color    : grey;
}

[Bosmonster]

bvp schreef op maandag 07 december 2009 @ 12:47:
[...]

De topBanner wil ik dus over een gehele breedte van 100% en een vaste hoogte van 65px.
De topNavigation wil ik ook 100% breedte en hoogte van 21 px.
Sidenavigation wil ik een vaste breedte van 200px en de hoogte moet de rest van de pagina zijn.
De main moet dus gewoon alles zijn wat er over blijft.

Die hoogte heb je die echt nodig? Want een pagina vult zich toch wel uit verticaal. Over het algemeen hoef je aan die hoogte niet te komen. Als je alleen wilt dat het grafisch doorloopt, kun je dat eenvoudig met een achtergrond-afbeelding bereiken natuurlijk.

Probeer de opbouw van een website meer in 'lagen' te zien, die je gewoon kunt stapelen.

[ Voor 6% gewijzigd door Bosmonster op 07-12-2009 14:04 ]

[bvp]

Tja nu ik erover nadenk hoeft idd misschien niet alles te schalen naar de overige 100%.
Ik heb namelijk een achtergrond kleurverloop achter mijn menu en die wil ik door laten lopen totaan de onderkant van de pagina.
Misschien moet ik dit dan 'faken' door eerst een achtergrond kleur te zetten voor de gehele pagina en de overige div elementen daarover heen te zetten ?
Dat is eigenlijk wat je bedoeld hier?

[Bosmonster]

Precies