Fasta kolumner (table-liknande layout) i CSS

Fick så snabba och bra svar på förra frågan så jag provar en till

Jag har en layout som består av två kolumner, en vänster meny-div med bredd i EM och en höger-div som flyter ut till högersidan av webläsarfönstret och därför inte har någon satt bredd. Så långt allt bra; bara att sätta float:left på vänster-div:en.

Det ska alltså se ut såhär:

oooKKKKKKKKK
oooKKKKKKKKK
oooKKKKKKKKK
oooKKKKKKKKK
oooKKKKKKKKK

där KKK innehåller text och ooo en meny som kanske bara är 3 rader hög.

Problemet är att båda kolumnerna alltid ska vara lika höga och gå ända ner till botten av skärmen, men högerkolumnen kan innehålla godtyckligt mycket text.

Hittills har jag löst detta med ett fulhack: jag stoppar helt enkelt in div:arna i varsin kolumn i en <table>. Sen jag blev xhtml-frälst har fått lära mig att skämmas för detta :"> :">

Om jag inte använder <table> kommer högerkolumnens text att floata in under vänstermenyn (iaf om högerkolumnens text gör den längre än vänsterkolumnen).

Det bästa svar jag fått från google är att man inte ska vilja ha en sån layout Ur ett usability-perspektiv köper jag faktiskt det, men min design kräver tyvärr två kolumner som inte inkräktar på varandra.

Som jag skrev, kan inte ha fast höjd.

Tack, har som skrivet googlat länge efter svaret; det jag fick från de första träffarna i din sökning var tyvärr inte ett svar eftersom boxarna antingen läckte text, inte följde varandras höjd eller dolde overflow. De flesta har dessutom fixed width. (Varför är fixed width så populärt?)

Ninjamac: Anledningen till att båda kolumnerna ska gå ändå ner är att det är det snyggaste upplägget och det enda som passar in med den grafiska profilen i övrigt.

Jag vill alltså verkligen göra exakt samma sak som med en två-kolumners tabell, fast med bara CSS om det går.