3 columns - midterste med fixed width?

Tags:    html css

<< < 12 > >>
Hej allesammen

Jeg prøver at lave en side, som fylder 100% i bredden, og har en centeret column på 700px. Problemet er, at jeg vil have en column på hver side af den, som automatisk fylder tomrummet ud.

Eks:

Browser er 900px i bredden:
1. column: 100% height, 100px width
2. column: 100% height, 700px width
3. column: 100% height, 100px width

Browser er 1400px i bredden:
1. column: 100% height, 350px width
2. column: 100% height, 700px width
3. column: 100% height, 350px width

Mit spørgsmål er, hvordan jeg får de to yderst columns til automatisk at tilpasse sig browserbredden?

Mvh Rune



11 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 4 karma
Sorter efter stemmer Sorter efter dato

Hej Jokke,

Ja, men det er ikke altid at browsere har auto som default, selvom de bør. Det kan godt gøres uden en tabel, som beskrevet.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

Med venlig hilsen
Ieet

Ps. Linket kan generere en sides CSS som du ønsker, det kan du bruge som grundlag.




Sorry, jeg ka sgu ikke lige finde ud af det. Den eneste anden løsning jeg kunne finde på virkede heller ikke. Det var noget jeg brugte for lang tid siden i forbindelse med noget absolut positionering. Anyway, jeg tænkte at man måske kunne specificere bredten ad sidekollonerne ved hjælp af width:50%-350px; men det virkede naturligvis ikke, var blot et skd i tågen.

Som sagt så er jeg meget rustem mht. css.


Noget helt andet er at jeg har svært ved at se i hvilken situation det du vil lave vil være nyttigt, jeg mener hvis der er noget som man gerne vil have så stort som muligt i et normalt design af denne type, så der det da netop midter kollonen.



jeg ville gå i krig med lidt table-markup.

Den anden udgave kan delvist lade sig gøre:
Fold kodeboks ind/udKode 

Bemærk at det kun er testet i Firefox. :)



Indlæg senest redigeret d. 23.04.2008 22:28 af Bruger #10216
ville det ikke være klogt at ønske sig midter kolonnen så bred som muligt, hvis teksten så også bliver længere, mener at HCI experter siger at linier over 70bogstaver er bogstaver er dårlige.

men ellers er dette en måde at opnå det han ønsker sig, virker selvfølgelig kun hvis javascript er slået til.
Fold kodeboks ind/udKode 





Hej Rune,

width: auto; i CSS'en. På begge menuerne, midten med 700px. Det "tag" som siden og menuen er i sætter du en width: 100% på.

Med venlig hilsen
Ieet



width: auto på et block element, er vel det samme som at lade det være.

Du skal bruge en tabel.

Eller JS dig ud af det, men tabellen's celler har netop de egenskaber du efterspørger.

/JJ




Hej Jokke,

Ja, men det er ikke altid at browsere har auto som default, selvom de bør. Det kan godt gøres uden en tabel, som beskrevet.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

Med venlig hilsen
Ieet

Ps. Linket kan generere en sides CSS som du ønsker, det kan du bruge som grundlag.


Hmm.. jeg synes ikke jeg kan få det til at virke. Dit link til column generator kan kun bruges hvis man sætter faste widths på de 2 side columns.

Og width: auto virker ikke. Hvis jeg ikke floater dem left, så står de bare under hinanden. Hvis jeg floater dem, så fylder side columns ingenting.

Nogen der eventuelt har noget kode man kan se på?




Hej Jokke,

Ja, men det er ikke altid at browsere har auto som default, selvom de bør. Det kan godt gøres uden en tabel, som beskrevet.

http://www.positioniseverything.net/articles/pie-maker/pagemaker_form.php

Med venlig hilsen
Ieet

Ps. Linket kan generere en sides CSS som du ønsker, det kan du bruge som grundlag.


Hmm.. jeg synes ikke jeg kan få det til at virke. Dit link til column generator kan kun bruges hvis man sætter faste widths på de 2 side columns.

Og width: auto virker ikke. Hvis jeg ikke floater dem left, så står de bare under hinanden. Hvis jeg floater dem, så fylder side columns ingenting.

Nogen der eventuelt har noget kode man kan se på?



Fold kodeboks ind/udKode 


Er ikke testet og virker sikkert ikke, da jeg er noget rusten i css, kan ikke engang huske hvordan floats fungerer præcis, men princippet har jeg vidst brugt før med succes.



Nixen bixen... det virker altså ikke. Hvis du kan finde din gamle kode ville jeg blive lykkelig :-)



<< < 12 > >>
t