---
title: "Problem med sidlayout"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/155903-problem-med-sidlayout"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "aasah"
published: "2007-01-12T10:22:49.000Z"
updated: "2007-01-23T18:17:23.000Z"
replies: 25
views: 1073
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/155903-problem-med-sidlayout"
---
# Problem med sidlayout
_Sida 1 av 2._
## #1 — aasah, 2007-01-12T10:22Z
Jag håller på att skriva om mina korsordssidor så att ingen del längre kräver omladdning från server mitt i. (Tidigare laddades ledtrådssidan om om man begärde lättare ledtrådar.) Nu hoppas jag lösa det med JavaScript. Därmed skulle jag helst vilja komma ifrån min gamla framelösning.
**Vad jag vill åstadkomma**
Själva korsordet ligger i en div, ledtrådarna i en annan. Det måste gå att skrolla dessa två divar oberoende av varandra. Dvs varje enskild div måste gå att skrolla. Jag vill ha dessa två divar bredvid varann, korsordet till höger och ledtrådarna till vänster. Lösningen **måste** funka i IE 6 (för det använder ca 90% av sitens besökare), men jag *vill* att den funkar även i FF.
1) Låter detta genomförbart?
2) Går det bättre om jag byter divarna de ligger i mot något annat? Tex Iframes?
3) De flesta verkar avsky att lösa positioneringen med tabeller, så om det går med CSS vore det ju trevligt.
Mitt första försök att åstadkomma detta ser inte klokt ut: [Horribelt resultat](http://www.tydal.nu/aasah/Lab/IntCW/jsDivsTstSourceNotGen.html). Dels hoppar ledtrådsdiven i sidled där korsordsdiven tar slut! :o Dels kommer ingen skroller fram. :( Dels finns inget mellanrum alls mellan divarna, vilket inte alls ser bra ut. :( (Än så länge ser det lika fult ut i IE som FF - samma problem i båda läsarna.)
All hjälp skulle uppskattas mycket!
Permalänk: https://www.webforum.nu/p/155903
## #2 — bruphoto, 2007-01-12T17:11Z
Det går med CSS. Ange en höjd för varje div, förslagsvis samma på båda, och lägg sedan till **overflow : auto;** för båda divarna. Detta gör att en rullningslist dyker upp så snart innehållet i divarna är större än vad som ryms inom höjden du angav.
Sedan kan du ange **float : left;** för ledtrådsdiven för att positionera dem bredvid varandra. Det ska fungera i båda läsarna.
Lycka till!
/Lars
Permalänk: https://www.webforum.nu/p/1920292
## #3 — tanten, 2007-01-12T18:31Z
Ett tips
för att alltid vara säker på att ledtrådarna ska komma bredvid korsordet så kan du lägga dem i en div med bestämd bredd
förslag:
```
```
och i css
```
#wrap{width: 1000px!important; }
.korsord{ width: 45%;
height: 600px;
margin-right: 20px;
overflow:auto;
float:left;}
```
Permalänk: https://www.webforum.nu/p/1920306
## #4 — aasah, 2007-01-13T12:07Z
Hmm... :q Jag undrar vad jag gör för fel? I IE 6 (FF har jag tills vidare ej kollat.)
**bruphoto**s förslag ser likadant ut som mitt ursprungliga och ligger i samma fil: [Denna](http://www.tydal.nu/aasah/Lab/IntCW/jsDivsTstSourceNotGen.html)
**Tantens** genererar en enda lång column istället för två bredvid varandra... Implementerat i egen fil (med egen CSS). [Denna](http://www.tydal.nu/aasah/Lab/IntCW/jsDivsTantenTstNotGen.html).
Permalänk: https://www.webforum.nu/p/1923408
## #5 — tanten, 2007-01-13T13:00Z
Jag hittar ingen motsvarigheten till .korsord och wrap i din kod, som du säger är efter mitt förslag. ..
Permalänk: https://www.webforum.nu/p/1923420
## #6 — tanten, 2007-01-13T13:22Z
Jag slängde in din kod i mitt förslag och då ser den ut så här i FF.
Eftersom det inte finns doctype och många valideringsfel så kan resultatet bli annorlunda i andra webläsare.
Permalänk: https://www.webforum.nu/p/1923423
## #7 — aasah, 2007-01-13T13:47Z
> **tanten skrev:**
>
> Jag hittar ingen motsvarigheten till .korsord och wrap i din kod, som du säger är efter mitt förslag. ..
```
```
wrap = wrapper, korsord = cwColumn
Sidan på Gotlandssidor laddas i IE helt blank, med absolut **inget** innehåll, i FF saknas skroller för ledtrådarna. Men lösningen måste funka i IE.
Permalänk: https://www.webforum.nu/p/1923430
## #8 — tanten, 2007-01-13T14:03Z
Det ska den göra nu, visas i IE. Hade glomt att avsluta en kommentar i css.
Se om scrollen fungerar nu för hos mig fungerar den både i IE och FF för ledtrådarna.
Permalänk: https://www.webforum.nu/p/1923435
## #9 — aasah, 2007-01-13T14:29Z
> **tanten skrev:**
>
> Det ska den göra nu, visas i IE. Hade glomt att avsluta en kommentar i css.
> Se om scrollen fungerar nu för hos mig fungerar den både i IE och FF för ledtrådarna.
Det gör den, funkar i båda. :) Insåg inte att det fanns osynliga skrollers... :r Kan man få en synlig skroller? För hur vet annars mina besökare att de kan skrolla?
Jahaja, det blir till att försöka se var din lösning skiljer sig från det jag skrev...
Permalänk: https://www.webforum.nu/p/1923441
## #10 — tanten, 2007-01-13T14:46Z
Osynlig??!!
Hos mig är ingen osynlig så det vet jag inte hur det gått till.
Skillnaden med din och min lösning annars är att jag slänger ner innehållet i en egen påse :P för att den inte ska blandas i hop med alla egenskaper som finns i resten av koden. Tror inte på att det blir bra att "classa" in den som du gör. Blir nog bara jobbigt att se till att inget annat tar över. :OO
Permalänk: https://www.webforum.nu/p/1923446
## #11 — aasah, 2007-01-14T16:36Z
Det som skiljde sig åt var att jag bytt namn på klassen i HTML-filen men inte i CSS...
Tack, tanten! :birp
Permalänk: https://www.webforum.nu/p/1923669
## #12 — aasah, 2007-01-23T14:49Z
> **tanten skrev:**
>
> Ett tips
> för att alltid vara säker på att ledtrådarna ska komma bredvid korsordet så kan du lägga dem i en div med bestämd bredd
> förslag:
>
>
> ```
>
> ```
>
>
> och i css
>
>
> ```
> #wrap{width: 1000px!important; }
> .korsord{ width: 45%;
> height: 600px;
> margin-right: 20px;
> overflow:auto;
> float:left;}
> ```
Denna lösning såg ut att fungera utmärkt, ända tills jag la in ett kort stycke (som dock är längre än kolumnen är bred). Då ligger plötsligt inte "kolumnerna" bredvid varann i FF längre! x( :( I IE funkar det hur fint som helst.
Finns det något sätt att fixa detta för FF så det blir samma utseende som för IE? :q (Att korta texten är **inte** ett alternativ.)
[Aktuell sida](http://www.tydal.nu/aasah/Lab/IntCW/jsTstSourceNotGen.html)
Permalänk: https://www.webforum.nu/p/1925863
## #13 — tanten, 2007-01-23T15:55Z
Jag får försöka se vad som hänt...
wrapper i koden wrap i css... Ingen doctype... till att börja med. Se om det räcker att ändra det annars så fortsätter vi att felsöka... :)
Permalänk: https://www.webforum.nu/p/1925892
## #14 — tanten, 2007-01-23T16:52Z
Nu när jag körde edit css i FF:s webdeveloper toolbar så flög allt upp på rätt ställe när jag tog bort kommentaren i den här
```php
.cwColumn {
width: 45%;
height: 600px;
margin-right: 20px;
overflow:auto;
float:left;
}{
```
Permalänk: https://www.webforum.nu/p/1925912
## #15 — aasah, 2007-01-23T17:09Z
> **tanten skrev:**
>
> Nu när jag körde edit css i FF:s webdeveloper toolbar så flög allt upp på rätt ställe när jag tog bort kommentaren i den här
>
> ```php
> .cwColumn {
> width: 45%;
> height: 600px;
> margin-right: 20px;
> overflow:auto;
> float:left;
> }{
> ```
Hmm... skälet till att den avkommenterats är att jag inte vill att kolumnerna ska vara lika breda. så för närvarande är korsordsdelen width 60% och ledtrådarna width 40%. Kan det vara så att problemet ligger i att min summa blir 100% medan din blir 90%? Vad används de sista 10 %:n till? Scrollbars?
Ska prova att göra om summan till 90% i stället. Hmm... hjälper i vart fall inte att ändra till 60/30... :q 45% kan ju inte vara ett magiskt tal!??
Permalänk: https://www.webforum.nu/p/1925918
## #16 — tanten, 2007-01-23T17:21Z
Men jag tror att 100% kan vara lite riskigt när du kör dem inline.
Inline tar ju över det du har i css-filen och du har 100% inline av vad? Där är jag osäker hur webläsarna räknar. Inte gjort något sådant själv...
Kan du inte ta bort alla vidder du har i koden och bara ange dem i css. Tror du får lättare själv när du ska ändra något då.
Permalänk: https://www.webforum.nu/p/1925921
## #17 — aasah, 2007-01-23T17:21Z
Ytterligare lite testning senare tätnar mystiken i min inte alltför kunniga HTML/CSS-skalle... Följande funkar inte heller:
```
-------- Med följande CSS ---------
.cwColumn {
/*width: 45%;*/
height: 600px;
margin-right: 20px;
overflow:auto;
float:left;
}
--------------------------------------
```
**Vari** ligger skillnaden mot att sätta vidden till 45% i CSS-filen för cwColumn??? :q :q
Permalänk: https://www.webforum.nu/p/1925922
## #18 — tanten, 2007-01-23T17:27Z
Vill du ha bredden inline så använd då px i stället. Du vet antagligen på ett ungefär hur brett ditt bredaste korsord är och rätta divarna efter det och har du 1000px som important för wrapper så blir det enklare att räkna ut hur breda de får vara.
I ditt fall är ju inte relativa storlekar så betydelsefullt och folk kommer ändå kunna förstora texten om de tycker din är för liten... :-)
Permalänk: https://www.webforum.nu/p/1925926
## #19 — aasah, 2007-01-23T17:31Z
Vi svarade samtidigt...
> **tanten skrev:**
>
> Kan du inte ta bort alla vidder du har i koden och bara ange dem i css. Tror du får lättare själv när du ska ändra något då.
Lade vidden i id:na för divarna i stället och plötsligt hoppade kolumnen tillbaka upp! Skönt!
Men... tyvärr hamnar de "en mil" ifrån varandra? Varför i allsindar då? Alltså det finns hur mycket som helst tomt utrymme mellan dem... Även IE uppvisar nu samma gap...! :o :x
Nej, jag vet inte hur stort mitt bredaste korsord är... Jag kanske inte har gjort det än...
Permalänk: https://www.webforum.nu/p/1925927
## #20 — tanten, 2007-01-23T17:32Z
Ah din kom emellan, men svaret kanske finns där. Jag har hållit på aldeles för lite med inline för att veta vad dina % räknar på för någonting. Jag misstänker ingenting utan att de slänger ut sig så mycket de kan. Prova med att sätta width inline på wrapper också.
Permalänk: https://www.webforum.nu/p/1925928
---
Tråden på webben: https://www.webforum.nu/amne/html-css/155903-problem-med-sidlayout
Nästa sida: https://www.webforum.nu/amne/html-css/155903-problem-med-sidlayout/page2.md