[css] Kolom aan bovenkant footer positioneren
Ik zit met een lastig probleem.
Allereerst een schets van de gewenste situatie:
Wat ik dus wil is dat de footer onder de content aansluit, en dat de rechterkolom aan de rechteronderkant vast zit (net boven de footer).
Echter, als de rechter kolom groter is dan de linker content, dan moet de rechterkolom niet over de header gaan.
Ik heb al verscheidene configuraties van float, position etc. gedaan.
Graag hoor ik hoe jullie dit zouden doen, ik hoef geen hele uitwerking, het gaat mij puur om het idee.
Google heb ik ook reeds geraadpleegd, maar ik heb niets relevant kunnen vinden.
Graag jullie input!
Gewijzigd op 14/05/2011 13:04:12 door Johan Sterk
Ik begrijp uit jou topic post dat je de sidebar al tegen de footer aan hebt, of moet dat ook nog uitgelegd worden?
Hoe je het oplost dat de sidebar niet over de header gaat is eigenlijk heel simpel. Geef de content een min-height nodig die even groot is als de height van de sidebar.
Punt is dat de height van de rechterkolom per pagina kan verschillen, min-height is een optie maar zorgt er voor dat op sommige pagina's een te grote hoogte wordt gegeven.
Ik heb de volgende opbouw:
Quote:
<div id="web">
<div id="header"></div>
<div id="midle">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
<div id="header"></div>
<div id="midle">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
En de css:
Quote:
#web {
position:relative;
width:1000px;
}
#header {
position:relative;
width:1000px;
height:100px;
}
#footer {
position:relative;
width:1000px;
height:100px;
}
position:relative;
width:1000px;
}
#header {
position:relative;
width:1000px;
height:100px;
}
#footer {
position:relative;
width:1000px;
height:100px;
}
En dan is nu dus de vraag hoe ik de div's midle, left en right kan vormgeven om het gewenste resultaat uit mijn openingspost te realiseren
Gewijzigd op 15/05/2011 10:38:56 door Johan Sterk
Als de div middle dan hoger word schuift right automatisch op naar beneden..
Hoe dit precies moet durf ik niet te zeggen maar het is mogelijk.
Dennis meijer op 15/05/2011 10:51:43:
Je de div right zo positioneren dat hij rechtsonderin blijft en een vaste hoogte heeft;)
Als de div middle dan hoger word schuift right automatisch op naar beneden..
Hoe dit precies moet durf ik niet te zeggen maar het is mogelijk.
Als de div middle dan hoger word schuift right automatisch op naar beneden..
Hoe dit precies moet durf ik niet te zeggen maar het is mogelijk.
Beste Dennis, dit kan ik werkend krijgen met:
Quote:
#right {
position: absolute;
bottom: 0px;
right:0px;
}
position: absolute;
bottom: 0px;
right:0px;
}
Punt is dan echter dat als de rechterkolom groter is dan de linker, dat de rechterkolom dan over de header gaat.
Tevens moet het ook mogelijk zijn maar weet ik ook niet zeker dat als right groter word links ook groter word;)
Dennis meijer op 15/05/2011 10:57:48:
ja dus moet je de right een maximale height mee geven of zorgen dat die niet groter word...
Tevens moet het ook mogelijk zijn maar weet ik ook niet zeker dat als right groter word links ook groter word;)
Tevens moet het ook mogelijk zijn maar weet ik ook niet zeker dat als right groter word links ook groter word;)
Punt is dat beide contents (left en right) variabel zijn. Als een van de twee altijd kleiner zou zijn dan de ander, was er geen probleem.
Wat je in je laatste zin zegt is eigenlijk wat ik zoek: als right groter wordt dan links, dat links dan ook groter wordt en als links groter is dan rechts dat rechts dan rechtsonder gepositioneerd wordt.
Tim S op 15/05/2011 11:10:16:
Misschien kun je met javascript de height van #right berekenen, en die dan als min-height instellen voor #middle
Beste Tim,
Dat is inderdaad een goede mogelijkheid, liever pak ik het direct met css aan; maar ik zal het als optie openhouden.
Verder nog ideeën?
@Johan, dit is een moeilijk iets en ik denk dat je het moet gaan oplossen met javascript. Het probleem is dat als je de sidebar tegen de footer aan wilt hebben je met position: absolute; moet gaan werken. Zodra je dat doet werkt het clearen van floats niet meer. Als je niet met position:absolute; werkt is dit voldoende:
Code (php)
1
2
3
4
2
3
4
#web:before
{
clear: both;
}
{
clear: both;
}