Tobias Otto: CSS Layer 100%

Hallo ich möchte in einem layer 3 spalten als layer einfügen, die immer die höhe haben wie der übergeordnetet layer. das heißt wenn der text in der einen layerspalte länger ist als in der anderen soll, er so hoch sein wie der andere auch. ich habe es mir height: 100%; probiert. geht aber nicht

#content                             {margin: 10px 0 0 0;}

#content1                            { margin: 0px 2px 0px 3px;  float: left; width: 285px; background: rgb(235,237,242); }
#content1 h1                         { border-bottom: solid 3px rgb(0,36,106); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
#content1 p                          { padding: 5px 15px 10px 5px;}
#content1 img                        { margin: 10px; border: solid 1px rgb(0,0,0);}

#content2                            { margin: 0px 2px 0px 5px;  float: left; width: 285px; background: rgb(239,241,245);}
#content2 h1                         { border-bottom: solid 3px rgb(71,97,147); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
#content2 p                          { padding: 5px 15px 10px 5px;}
#content2 img                        { margin: 10px; border: solid 1px rgb(0,0,0);}

#content3                            { margin: 0px 0px 0px 5px;  float: left; width: 285px; background: rgb(250,250,240);}
#content3 h1                         { border-bottom: solid 3px rgb(158,172,198); background: rgb(255,255,255) url(/gfx/site/krone.gif) no-repeat; padding: 0 0 0 28px; font-weight: bolder;}
#content3 p                          { padding: 5px 15px 10px 5px;}
#content3 img                        { margin: 10px; border: solid 1px rgb(0,0,0);}

danke

  1. hi,

    Hallo ich möchte in einem layer 3 spalten als layer einfügen, die immer die höhe haben wie der übergeordnetet layer. das heißt wenn der text in der einen layerspalte länger ist als in der anderen soll, er so hoch sein wie der andere auch. ich habe es mir height: 100%; probiert. geht aber nicht

    CSS sieht nicht vor, dass von einander unabhängige Elemente sich gegenseitig beeinflussen.

    Ausnahme: Für gute browser könntest du das mit den für tabellenartige Darstellung gedachten display-Typen hinbekommen.

    Wenn du auf den IE nicht verzichten kannst, bleiben dir nur Workarounds. Faux Columns wäre ein Stichwort.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }