CSS problem. Nu står det stilla i huvudet eller också går det inte fixa..

Om man vill dela in browserfönstret i tre kolumner.

Kolumn 3, bredd 100 pixel. Längst ut till höger på skärmen.
Kolumn 2, också bredd 100 pixel. Till vänster om kolumn 2.
Kolumn 1 skall ligga till vänster och ta upp resten av skärmen oavsett skärmstorlek.

Och alla kolumner ska scrolla. Hur fixar man det med CSS och <DIV>-taggar???? Nån som kan?

Jag vet ett grymt ställe som heter Google.

http://www.google.se/search?q=css+3+columns

Tack för försöket men funkar inte. Innehållet i kolumn 1 lägger sej rakt över hela sidan och de två andra kolumner hamnar under.

Lätt att hitta exempel där den tredje kolumnen ändrar storlek eller där man vet storlekarna på alla tre kolumnerna. Men jag ska söka vidare. :)

Tänk på att din layout i princip är 2 kolumner. Alltså, 1 flexibel kolumn till vänster, och en kolumn till höger som är 200px.

Högerkolumnen kan du ju dela upp separat, utan att bråka med den övergripande layouten.

Tack alla! :) Nu har jag fixat det. jonas kod funkade nästan men man måste tydligen skriva DIV-taggarna i omvänd ordning:


<div id="container">
<div id="column3"></div>
<div id="column2"></div>
<div id="column1"></div>
</div>

#container { width 100%; }
#column1 { float left; overflow auto; }
#column2 { float right; overflow auto; width 100px; }
#column3 { float right; overflow auto; width 100px; }

Förtydligan för oss som vill veta
Float right skall ligga innan innehåll som ligger till vänster om floaten.
Gör inte bilden, text, diven, det så hoppar den "en rad".