layout med css

http://www.gun.dk/layout/layout.jpg

Selvfølgelig, tak.

Som sådan her: http://munchi.dk/exp/755350/ ?

.content boksene kan der sættes højde og bredde på direkte på boksen, eller fjern højde og bredde og de tilpasser sig efter størrelsen af indholdet.

Supert!
Det har jeg bakset med i MANGE timer!

MEN, det er selffølgelig et problem: Siden skulle gerne udvide i højden hvis der kommer der er meget .content - men den bliver aldrig højere?
(til gengæld vil jeg gerne have den fylder hele højden selv om der er lidt .content)

Æææh - hvad er det der skal udvide sig i højden afhængig af indholdet ? I følge din tegning, ser det ud til at det røde område skal være 100% i højden.

Hvis du fjerner højde på .content boksene vil de udvide sig automatisk.

Beklager, det var mig der glemte det under beskrivelsen.
Det er helt rigtigt at siden (#leftedge + #paper + #rightedge) skal være 100% i højden. Så det ser helt rigtigt ud!

MEN hvis nu der er mere .content (gul) end der er plads til på paper (rød) sker der mærkelige ting:
(se http://www.gun.dk/layout)
i Explorer: edges er kun på de "første 100%" af siden.
i Safari (mac): der kommer en scrollbar, men scroller man ned er der ikke noget - hverken edges, paper eller .content
i FireFox (mac): man ser .content men paper og edges er ikke fuldt med ned.

se: http://www.gun.dk/layout

Vi er vel ude i noget med at mainwindow minimum skal være 100% i højden eller mere, så har ændret lidt på stylene mainwindow, leftEdge, paper og rightEdge. Så tror jeg dette er løsningen for dig. Har testet det i IE7 og FF og det ser fint ud. Så mon ikke Safari også følger med.

#mainwindow {
    width: 822px;
    min-height:100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
}

#leftEdge {
    width: 10px;
    min-height:100%;
    height: auto;
    float: left;
    background-image: url(images/edgeLeft.gif);
    background-repeat: repeat-y;
}

#paper {
    width: 800px;
    min-height:100%;
    height: auto;
    float: left;
    background-color: #ffffff;
    border-width: 0px 1px 0px 1px;
    border-style: none solid none solid;
    text-align: center;
}

#rightEdge {
    width: 10px;
    min-height:100%;
    height: auto;
    float: left;
    background-image: url(images/edgeRight.gif);
    background-repeat: repeat-y;
}

-- men min-height kendes ikke af IE6 ...

Nej det ved jeg. Men der er ikke skrevet noget om det skal virke i IE 6. Og jeg har heller ikke længere IE 6 på min maskine. Så derfor har jeg ikke kunnet test hvordan det ser ud. Men formoder man så må leve med at sitet ikke har 100% højde når content ikke selv fylder 100% eller mere. Eller så må man vel en anden løsning. Eksempelvis selv justere højden vha javascript når siden loades.

Nu har jeg prøvet frem og tilbage med mange forskellige løsninger.
Og notes2c's svar fungerede ikke i ie6 (og det havde jeg vist godtnok heller ikke skrevet at det skulle - men det skulle det).

Jeg havde ellers en ide om at siden skulle være lavet "rigtigt" med css, men når virkede i n browser, i en version, virkede det ikke i en anden. Løsningen blev derfor en god gammeldags tabel.

..men tak for alle buddene. Og for den mest ihærdige indsats og det bud der var tættest på at lykkes for notes2c pointene.
Tak for hjælpen.