[CSS] Kolommen binnen div

[Makkelijk]

Ik heb (weer) een irritant CSS probleempje.

Plaatje:


De pagina begint met een aantal horizontale balken, binnen deze balken worden een aantal elementen absoluut gepositioneerd (nu nog niet allemaal erin). Onder die balken heb ik een grote content area en onderaan de pagina een footer, die altijd onderaan staat. Het zijn geen css frames, dus de footer loopt mee met de pagina, maar moet minimaal onderaan staan.

Het probleem wat ik heb zit in de blauwe kolom waar ik blaat in heb geschreven. Deze moet het hele gedeelte opvullen, om dit te bereiken meot zijn (nu rode) parent het gebied eronder ook opvullen. Ik heb géén idee hoe ik dit bereik. Technisch gezien kan ik natuurlijk een background op body zetten en die rechts weergeven, maar dit vind ik een prut oplossing. Bovendien loop ik vaker tegen dit probleem en heb ik nooit de goeie oplossing gevonden, ik kom namenlijk weinig layouts tegen die een aantal horizontale balken hebben en daarbinnen een verticale kolom (andersom gaat wel prima namenlijk..)

CSS:

code:

html, body {
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 0.875em;
    line-height: 1.5;
    background: #fffbf6;
    color: #333333;
    height: 100%;
}

div#baseitem_topbar {
    position: relative;
    width: 100%-3em;
    padding: 0 3em 0 0;
    border-bottom: 1px solid #444444;
    background: #f6781d;
    text-align: right;
}

div#baseitem_menubar {
    position: relative;
    width: 100%;
    height: 110px;
}

div#baseitem_banner {
    position: relative;
    width: 100% - 1em;
    height: 137px;
    padding: 0 1em 0 0;
    border-top: 1px solid #444444;
    border-bottom: 1px solid #444444;
    background: #f65f1d;
}
    
div#baseitem_center {
    position: relative;
    padding: 0 1.5em 5em 0;
    background: Red;
}

    div#center_left {
    }
    div#ribbon {
        position: absolute;
        top: 0; right: 10px; bottom: 0;
        /*float: right;
        height: 100%;*/
        width: 20em;
        background: #e5ecef;
    }

div#baseitem_bottombar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 0 3em 0 0;
    border-top: 1px solid #444444;
    background: #f6781d;
    text-align: right;
    line-height: 2;
}

[ Voor 34% gewijzigd door Makkelijk op 01-04-2008 20:44 ]

[Blaise]

Je hebt hier ook wel CSS templates voor die je kan overnemen. Waar je op moet zoeken is two-column + faux (voor opgerekt, niet bg image) + header + footer. Dit komt denk ik heel erg in de buurt: http://www.456bereastreet...tandards/csslayout/2-col/ / http://www.456bereastreet...ayout/2-col/finished.html