div bredde tilpasset innholdet

[Torbjørn]

Hvilken css property må jeg sette for å få en <div> til å sette bredden tilpasset innholdet istedet for 100%?

[dms]

Vet ikke om jeg er helt med på tankegangen her, men om du ikke definerer width i det hele tatt vil <div> utvide seg i forhold til innholdet.

[Torbjørn]

mine div'er spenner bredden til body 100%, ikke utfra innholdet som f.eks kan være 3 ord for eksemplets skyld.

[FuLu]

Hvis du vil at din DIV skal bare være like bred som innholdet f.eks. (Blir kanskje wrapping, avhengig av alt annet rundt DIV'en) Så kan du vel ha noe slikt:

 

<div style="display: compact;">blabla</div>

 

Eller så kan compact byttes ut med run-in eller inline, bare det ikke er block, siden block bruker en hel linje for seg selv.

[Torbjørn]

compact fikk ingen effekt, min div spenner bredden av vinduet 100% uavhengig av hvor stort innholdet er.

 

EDIT:

 

jeg satte opp en on-line demo:

 

http://sirius.isa-geek.org/div_css.html

 

takk for hjelp.

 

ser ut som inline blir rett

Endret 7. november 2003 av Torbjørn

[FuLu]

Jo, mulig det var noe regler rundt run-in og compact verdiene, at de ville oppføre seg som block hvis det ikke var noe annen content som ville påvirke den, ellers ville den oppføre seg som inline, hvis du skjønner

[Torbjørn]

jeg fikk imidlertid ikke brukt den på siden jeg var interessert i, hele <DIV>'en bare forsvant og ble en liten klædd oppe i hjørnet.

[FuLu]

Har du link til problemet?

[haugsand]

Hvis du setter til css-egenskapen float: left; så tror jeg ikke div'en blir 100%. Du kan være nødt til å være forandringer hvis du velger den løsningen, gjerne bli kjent med egenskapen først som sist her sånn.

[Torbjørn]

http://sirius.isa-geek.org/sms/?DEBUG

 

Jeg har RØD, GRØNN og altomsluttende BLÅ div med faste bredder.

 

Jeg ønsker at GRØNN div skal ha varierende bredde, og samtidig ikke låse BLÅ div på en fast bredde (varierende den og).

 

hvis jeg fjerner 'width' fra CSS til den BLÅ div'en, blir det seende slik ut:

http://sirius.isa-geek.org/sms/?DEBUG&style

 

hvis jeg setter 'inline', blir det seende slik ut:

http://sirius.isa-geek.org/sms/?DEBUG&style=inline

 

compact:

http://sirius.isa-geek.org/sms/?DEBUG&style=compact

 

Så, jeg kan ikke få varierende bredde på filtre-navigatoren (som er rimelig med tanke på varierende dybde i filtreet) og samtidig beholde en omsluttende BLÅ div som ikke spenner hele vinduet automatisk, men som beholder en tettsittende bredde og lar den grå bakgrunnen vises til høyre for seg.

[magikern]

tror kanskje noe som dette bør fungere:

<div id="superiour">
<div id="left">
</div> 
<div id="content">
</div>
</div>

 

css -->

#superiour {
   width: 100%;
   position: absolute;
   top: 0px;
   left: 0px;
}
#left {
   float: left;
   position: relative;
}
#content {
   float: right;
   position: relative;
}

 

da skal (hvis jeg har skrevet riktig) left bruke så mye plass den trenger fra venstre side retning høyre og content skal bruke så mye den trenger fra høyre mot venstre, men overlapping kan muligens forekomme...

[FuLu]

Problemet med din løsning magikern, er at det ikke funker særlig i andre browsere enn IE, funker ikke i mozilla eller opera.

 

Testa denne løsning, er litt "hack" siden jeg sier at margin-left på alle P tag'ene skal være slik. Må vel endres utfra hvor bred tree'et blir, noe som kan virke noe udynamisk, hvis den meny f.eks forandrer seg..., eller så kan du droppe den margin-left på P'en og bare la content DIV'en wrappe seg under menyen.. men som igjen kanskje ikke oppnår det ønsket du ville ha

 

http://home.chello.no/~alexholm/test/test.html

[Torbjørn]

FuLu: Hmm... når jeg ser på siden i Opera 7.21, så ser det ikke ut som om forslaget ditt løser problemet.

 

Jeg ønsker en konstant bredde på RØD div, dvs den som ligger til høyre og som viser innholdet på siden.

 

Bare menyen til venstre skal ha varierende bredde. Total DIV'en, som omslutter begge to, skal så dynamisk endre bredde etter bredden på innholdet, og ikke span'e hele bredden til vinduet.

 

Jeg skjønner imidlertid ikke hvorfor det ikke går å sette display: inline, slik det går i eksempelet:

http://sirius.isa-geek.org/div_css.html

 

På den reelle siden, blir dette bare "tull":

http://sirius.isa-geek.org/sms/?DEBUG&style=inline

...idet den omsluttende DIV'en legger seg oppe i venstre hjørne og nede i venstre hjørne ser det ut som.

 

Magikern: har ikke sett på ditt forslag ennå, men skal ta meg en titt.

 

Uansett synes jeg det er rart at dette ikke går å løse på en enkel måte, det burde ikke være noe avansert å la en DIV wrapp'e innholdet uten å strekke seg videre.

 

Tabeller gjør jo dette som default f.eks.

[FuLu]

Uff, begynner å bli seint

 

Men dette er ganske håpløst, det jeg kom opp med nå fungerte i IE og Firebird, men i Opera 7.21 så wrapper den røde DIV'en under den grønne DIV'en. Nå er jeg i 1024x768 og kjørte dem i fullscreen, endrer jeg størrelsen på vindu til noe mindre, så vil den røde wrappe seg under den grønne . Hvis man endrer bredden på den grønne DIV'en så vil også den blå DIV'en resize seg. Men kommer det utenfor skjermen så vil den røde wrappes under den grønne

 

Her er grønn DIV normal:

http://home.chello.no/~alexholm/test/test2.html

 

Her er grønn DIV litt bredere:

http://home.chello.no/~alexholm/test/test3.html

[Torbjørn]

sent og sent. det er da helg

 

tror jeg bare får skrinlegge saken og sette en max-bredde på navigasjonemenyen og ikke lage flere under-kataloger i den. evt scrolle den sideveis. takk for at du tok en titt på saken!

 

selvom jeg sterkt misliker å måtte erkjenne at dette blir et html-design problem jeg ikke klarer å løse.

[Torbjørn]

float: left;

 

gjorde at det fungerer annen hver gang i opera, ikke i det hele tatt i IE, har ikke testet Mozilla.

 

Tror jeg beholder fast bredde på hele suppa.

 

Debug funksjonaliteten er fjernet.