Fasta kolumner (table-liknande layout) i CSS

Tråden skapades och har fått 7 svar. Det senaste inlägget skrevs .
1

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.

Senast redigerat 2007-11-09 02:03

Det finns några olika sätt att göra det, inget är egentligen toppen. Men innan jag ens försöker peka dig i rätt riktning tänkte jag fråga varför? Ska vänsterkolumnen (eller bägge kolumner) ha en bakgrundsfärg/bild som ska flyta hela vägen ner?

Jag har några olika varianter på kod liggande som klarar detta, men jag ville ju fråga först om vad du ska göra - det kanske finns en mycket enklare väg att lösa det på..

  • Medlem
  • Eskilstuna
  • 2007-11-07 09:07

Jag kan tipsa dig om att gå till http://www.webdesignskolan.com, Där kan du läsa det mästa om html,css osv. Men förstår inte varför du ska ha tabeller i en div ? Då är det ju enklare att sätta en fast höjd på div'en och sedan lägga in yttliggare två div'ar med
float:left; ?

Som den här jag hittade på webdesignskolan :

#box1 {width: 150px; padding: 10px; float: left;}
#box2 {width: 150px; padding: 10px; float: left;}

Då det ju bara att lägga till fast höjd höjden.

Ursprungligen av LinusE:

#box1 {width: 150px; padding: 10px; float: left;}
#box2 {width: 150px; padding: 10px; float: left;}
Då det ju bara att lägga till fast höjd höjden.

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.

Senast redigerat 2007-11-09 02:08
  • Medlem
  • Gävle
  • 2007-11-07 10:30
  • Medlem
  • Bollnäs
  • 2007-11-08 22:49

Det du är ute efter kallas "konstgjorda spalter" (faux columns) och finns beskrivet på A list apart.

Då är det som jag trodde alltså, att faux columns är det bästa som bjuds?

Tack för tipset, men det känns som lite väl mycket fulhack; fulare än att resiza height med javascript eftersom sidan kommer att flippa ur när användaren resizar sin font (och därmed får EM att ändras). Då fortsätter jag nog hellre med <table>, med de begränsningar det medför, och håller tummarna för CSS 3.

jag kan kolla på det här - har bara inte hunnit med det. Visst kan vi få till flera kolumner som håller samma höjd eller fullhöjd (både dokument och viewport om det behövs) utan att ta till javascript eller tables. Jag frågade vad du skulle ha det till så att jag skulle få en förståelse för hur innehåller skulle hanteras i kolumnerna. Kolla http://webbutvecklarna.se/ för två kolumner som håller full-höjd, eller http//comvex.se/ för kolumner som håller både samma höjd och fullhöjd (både doc och view). Comvex är i o f s inte kristallklar i koden men principen finns och används.

1
Bevaka tråden