[Pixit]

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?

[Jonas]

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

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

[Undoredoo]

Jag vet ett grymt ställe som heter Google.

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

[Pixit]

Ursprungligen postat av Jonas

div id=container
div id=column1/div
div id=column2/div
div id=column3/div
/div

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

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.

Ursprungligen postat av Undoredoo

Jag vet ett grymt ställe som heter Google.
http://www.google.se/search?q=css+3+columns

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.

[allstars]

http://www.maxdesign.com.au/presentation/l...iquid/index.htm

[Undoredoo]

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.

[Pixit]

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; }

[Mattias]

Originally posted by Pixit@Jun 11 2009, 16:59
Tack alla *Nu har jag fixat det. jonas kod funkade nästan men man måste tydligen skriva DIV-taggarna i omvänd ordning:

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".