Divar brevid varandra ? [LÖST]

[Forcevision]

Tjabba.

Det står helt still skulle vilja ha två divar brevid varandra alltså sida vid sida hur fanken får jag det ?

/Force

[Osprey]

Det finns flera sätt... antingen att du anger absoluta positioner så att de hamnar sida vid sida, eller också att du låter dem göra det genom att åtminstone den 2:a diven har en relativ prosition... För att detta ska funka måste du givetvis sätta upp bredden för var och en av dem så att de får plats bredvid varandra och det är inte alltid som 50% får plats bredvid 50% (!), utan du kan prova med 49/49 eller något sådant...

[Lars]

Jag tror det funkar om du sätter "float: left" (eller right) på båda, eller ena. Just floats är lite svåra att förstå sig på tycker jag.

[Osprey]

Float har jag för mig att jag bara använt när en sak så att säga ska flyta uppe på en annan, men det kan hända att det går på det sättet också...

[Lars]

På http://ubuntu-se.org/planet/ ligger vänster- och högerspalt som divar (med "float: left" respektive "float: right"). Jag tror att jag snodde den grejen från någon standardmall för planeter.

[Forcevision]

Så här ser min css mall ut för dessa två divar som jag vill ha brevid varandra men nu ligger den ena ovanför den andra.

Kod: Markera allt

#main {background-color:#E8E8E8; font-family:verdana; font-size: 10px; color: #000000; border-right: 2px solid #9cce62; border-left: 2px solid #9cce62; border-bottom: 2px solid #9cce62; position: relative; width: 890px; height: 670px; position: relative; left: 3px;}
#reklam {background-color:#E8E8E8; font-family:verdana; font-size: 10px; color: #000000; border-right: 2px solid #9cce62; border-left: 2px solid #9cce62; border-bottom: 2px solid #9cce62; position: relative; width: 244px; height: 670px; position: relative; right: 3px;}

[Osprey]

Har du utrymme så att 890 px + 244 px får plats? Jag vet inte säkert om "borders" räknas in i detta eller om bredden för dem läggs till. Om du vill så kan du prova att sätta upp minimumbredd för "body" till såpass att allt ska få plats och prova...

[Forcevision]

Hur menar du får plats ?

Skärm bredden menar du eller ?

Om dom inte får plats så vill jag att det skall komma fram en scrollbar så man kan scrolla åt vänster.

[Katt]

Brukar vara enklast att slänga in allt i en huvuddiv:

<div id="frame">
<div id="left"></div>
<div id="right"></div>
</div>

och en css i stil med:

#frame {width:800px; min-height:200px; margin:0 auto}
#left {width:400px; height:100%; float:left; border:0}
#right {width:400px; height:100%; float:right; border:0}

[Osprey]

Precis som Katt föreslår så bör du ha en huvud-div (vilket det iofs går att använda body som även om det inte är en div), men hur som helst måste denna ha en bredd som rymmer de båda andra... annars kommer det inte att bli någon scrollbar utan snarare en massa annat som hamnar i en röra så som det råkar få plats...

[Edit] För att försöka förklara det lite så är en body utan angiven storlek som en plastpåse, som man sedan lägger i ett fönster som är som en säck. Lägger man ner två kartonger i påsen så hamnar de så att säga huller om buller oavsett hur man bär sig åt. Om man istället har en body (eller en annan div som ligger utanför) med fast storlek så blir det som en låda och kartongerna kan ligga bredvis varandra även när man lägger ner lådan i påsen.

Som jag har färstått det så innebär float ungefär att saker ligger på olika nivå, precis som med z-index, däremot har jag inte riktigt klart för mig relationen mellan dessa. Det är möjligt att du kan behöva float som Lars säger också, du får prova...

[Forcevision]

En helt annan fråga. om man gör en div som är 300höjd och 200bred Så vill jag skriva text i denna diven men så blir det mer än vad 300höjden räcker till, kan man få en scrollbar då i den diven ?

[Katt]

overflow:scroll;

[Forcevision]

Om jag använder :

Kod: Markera allt

overflow:scroll;

så får jag scrollbars både upp och ner och sidoled men jag skulle gärna endast vilja ha upp och ner scrollbar går det ?

[Osprey]

Prova med:

Kod: Markera allt

overflow: auto;

[Edit] Det finns förresten overflow-x och overflow-y också, men jag är väldigt osäker på vilka webbläsare som stöder dem. Om du vill så kan du ju alltid prova med t.ex:

Kod: Markera allt

overflow-x: auto;
overflow-y: scroll;

[Forcevision]

Prova med:

Kod: Markera allt

overflow: auto;

[Edit] Det finns förresten overflow-x och overflow-y också, men jag är väldigt osäker på vilka webbläsare som stöder dem. Om du vill så kan du ju alltid prova med t.ex:

Kod: Markera allt

overflow-x: auto;
overflow-y: scroll;

Tackar hittade det overflow-y: scroll; va vad jag letade efter.

Tackar för hjälpen.