Verticaal uitlijnen div in 3 kolommen layout

[Rodyman]

Ik zit met een probleem met het verticaal uitlijnen van divs in een css 3 column layout.

Het volgende wil ik bereiken:



Waarbij de lengte van de kollommen telkens meegroeid met de lengte van de inhoud. Dit werkt allemaal perfect, echter het probleem komt bij de footercontent. Ik krijg deze niet uitgelijnd aan de onderkant.

De volgende html code heb ik nu staan:

HTML:

    <div id="header">
    </div>
    <div id="columnContainer">
        <div id="Col1">
        </div>
        <div id="Col2">
        </div>
        <div id="content">
        </div>

        <div id="footercontent">
        </div>
    </div>

    <div id="footer">
    </div>

De (versimpelde) CSS die ik gebruik:

Cascading Stylesheet:

#columnContainer
{
    overflow: hidden;
    width: 1016px; 
}

#Col1
{
    float: left;
    width: 170px;
}

#content
{
    margin-left: 170px;
    margin-right: 256px;
}

#Col2
{
    float: right;
    width: 256px;
}

#footer
{
    clear: both;
}

De footercontent heb ik op verschillende manieren geprobeer op de goede plek te krijgen: Door position: relative en bottom 0 te gebruiken, door de height van de content op 100% te zetten en vertical-align bottom te gebruiken. Ik heb zelfs een table erin gezet met height 100% en valign=bottom maar zelfs dit pikt hij niet in XHTML.

Heeft iemand enig idee hoe dit netjes op te lossen in XHTML/CSS? Ik kon genoeg vinden over verticaal uitlijnen van divs op internet, maar niet in combinatie met een dergelijke 3 kolommen layout.

[dB90]

Helpt het als je je content en footercontent ook een float:left; geeft?

[Rodyman]

Dan schuift hij onder de rechterkolom...

[Kiphaas7]

Al geprobeerd een wrapper div om content en footer-content heen te zetten? Op die manier heb je een vrij standaard 3 column layout probleem.

Dan kun je binnen die wrapper div je content en footer-content positioneren.

[Verwijderd]

ik zou #content een position:relative; geven en 2 div's erin plaatsen, waarvan 1 #footercontent is en position:absolute; heeft. zo krijg je die div altijd onderaan.

[MsG]

Lol volgens mij had ik precies hetzelfde. Alleen heb ik niet zo'n centrale overlappende footer. Misschien heb je daarom nog wat aan mijn topic? Footer niet tegen content aan