Jeg sliter litt med å tilpasse bredden på hovedelementet mitt. Jeg har en div på venstre side, og en div på høyre side. Så har jeg en border rundt div'en i midten. Men jeg sliter med å få den til å fylle hele plassen sin. Venstre div har width:20%, og det samme har høyre div.. Har ved prøv-og-feil-metoden funnet ut at ved width:55% så holder midtdiv'en seg på plass, men width: 56% så blir den så stor at høyrediv'en hopper ned og legger seg under de to andre. Problemet er at midtdiv'en likevel ikke fyller plassen sin, så det blir et unaturlig og stygt tomrom på 30ish pixler mellom midtdiv og høyrediv. Venstrediv er float:left, mens høyrediv er float:right.

Har sett over alt av margins o.l. Lest nøye gjennom CSS-koden mange ganger, og jeg ser ikke hva jeg kan ha gjort feil.

Jeg forstår at for å kunne hjelpe med dette er det kanskje nødvendig å se problemet konkret. Men dette er en personlig side som jeg ikke ønsker å legge ut offentlig på nFF. Hvis du føler behov for å se det for å kunne hjelpe, ta kontakt via PM.

Her er bilde av situasjonen: http://bildr.no/thumb/1159438.jpeg

Inne i midtdiv'en er det forresten tabeller. Antar disse er med og styrer bredden på div-borderen..? Men på bildet er table width:100%.. overstiger jeg 100% så går bare tabellen utenfor borderen.

Håper noen vil hjelpe! Takk for svar

Hvis du vil ha de helt inntil hverandre, prøv å sette margin: 0px; på alle div'ene. Da burde de bli plassert helt inntil hverandre. Hvis ikke, prøv å sette margin til 0,5% på alle, og width på den miderste til 57%. Da burde de i teorien bli stilt like langt fra hverandre
Les om Box-Model så kanskje du blir klokere, skal innrømme at jeg ikke er 100% sikker på at det jeg har beskrevet tidligere vil virke.

Hva med å sette alle "div"ene til float:left?

Sjekk ut display:table-cell;

http://ajaxian.com/archives/display-table

Prøvde det etter at jeg laget denne tråden. Da la alle seg fint inntil hverandre. Fint å se. Problemet var bare at det ble det tomrom på høyre side av alle div'ene. Hele containeren hadde nemlig en fixed width.

Har fått råd om å bare drite i fluid width, og sette alt til fixed width for bedre kontroll.. Vel, jeg sliter som faen nå, og merker jeg blir irritert. Enten er det jeg som ikke kan telle, eller så er det browserne.

Containeren har width på 960px. I tillegg har jeg nå satt:
venstrediv width: 190px
senterdiv width: 550px
høyrediv width: 190px
= 930px

i tillegg er det margin 2 på sidedivene og 3 på senterdiv.. altså tilsammen 2*2 + 2*3 + 2*2 = 14px margin.

i tillegg er det 1 px border på alle divene. det blir 2 på venstre, 2 i senter, 2 i høyre.. og på containeren.. vet ikke om den skal telles med, men vi kan gjøre det.. max 8 px..

930+14+8 = 952..
Likevel får den altså faen ikke plass inni containeren (som er satt til 960px), så høyrediv hopper ned og legger seg under venstrediv.

Som om ikke det er nok, er nettleserne uenig om alt. Med en gang det ser greit ut i Chrome, så kan du banne på at Firefox har fucket det opp. Her er venstremenyen min i tre forskjellige browsere. Høyrediv'en er også helt umulig. Plutselig passer den i Safari, men ikke i de andre nettleserne. Dritt.

Jeg vet ikke hva jeg skal gjøre. Alt jeg vil er å ha tre div'er ved siden av hverandre, slik at de utfyller hele den angitte plassen. Hvorfor i alle dager skal det være så vanvittig vanskelig?

prøv å legge til * {margin:0;padding:0;} i css'en

Her har du et eksempel på display:table-teknikken: http://jsfiddle.net/KJhh5/1/

Var litt tvilende i begynnelsen, men jeg bestemte meg for å prøve dette. Det funket helt fantastisk!! Tusen takk for tipset!
Men jeg ser i linken her at folk er litt negative i kommentarene og snakker om tables og design osv.. Hvorfor er de negative? Jeg vet også at man ikke skal bruke tables til design sånn ideelt sett, men hvilke negative direkte konsekvenser er det med denne løsningen? Siden folk faktisk syter på det, mener jeg..

Men jeg har ett problem med det. (Jeg kaller forresten div'ene for "meny", "innhold" og "info" fra nå av, left to right..)
I "meny" har jeg et 200x200 px bilde øverst. Teksten begynner altså ca 250 px nede i menyen. Og av en eller annen grunn begynner nå teksten på samme høyde også i "innhold" og "info", altså ca 250 px fra toppen. Hvorfor det? Hvordan kan jeg få det helt opp på toppen i disse div'ene?


Heck, når jeg først er i gang, tar jeg like gjerne enda et spørsmål (siden du er så flink med tabeller!):
På den ene siden min, har jeg tabeller. Altså, faktiske, ordentlige tabeller, som i Excel. Den største her har 20 kolonner. "Navn", <1-18> og "Totalt" står i headercellene. I tillegg er det ca 16 rader nedover med forskjellige navn... Da har jeg to spørsmål til dette...
- Er det mulig å få en auto-fitting bredde på "Navn"- og "Totalt"-kolonnene, samtidig som man setter lik bredde på <1-18>-kolonnene, slik at alt blir optimert med mest mulig (men lik) plass i de 18 rutene i midten?
Dessuten:
- De fleste av disse rutene kommer til å stå tomme. Finnes det noen kjapp og kort (kodemessig) måte å skrive direkte inn i de spesifikke rutene på? Slik jeg har det nå, har jeg:
så fyller jeg inn i de td-ene som trenger skrift. Synes det er litt tungvindt, og genererer maaaasse kode.. over 350 linjer for én tabell.. Her har jeg laget en illustrasjon på hvordan det skal være... Bare at det kommer til å være enda færre ruter med innhold. Ca 10% av rutene skal ha tall i seg. Og som sagt, 20 kolonner, 16 rader.



Så!
Det ble mye her nå! Her er i alle fall alt jeg lurer på, kort oppsummert.
1. Hvorfor er folk negativ til table-div-løsningen?
2. Hvordan blir jeg kvitt det store tomrommet øverst i to av div'ene?
3. Hvordan setter man automatisk, men lik, bredde på en table til å oppta hele div-bredden?
4. I store tabeller, finnes det en enklere, mer effektiv måte å skrive rett i spesifikke celler på, enn å skrive full tabellkode helt ut?

TUUUSEN takk for svar!

1. Det fungerer ikke nødvendigvis i eldre nettlesere. Dessuten er det en tilnærming til en praksis som var svært vanlig før, men som nå mildt sagt er uglesett: å bruke tables for å strukturere layout.
2. Det er vanskelig å si uten å se koden. Mitt forslag er at du bruker Opera sin dragonfly eller laster ned firebug til firefox eller et tilsvarende verktøy. Da er det lettere å se hva som skjer, da den markerer marginer osv. om det skulle være det som "dytter" ned resten av innholdet.
3. table { width:100%; }?
4. Er ikke helt sikker på hva du mener her? javascript/serverside?

og angående sette automatisk bredde på første og siste celle i en row, kan du prøve dette:

1. display:table er en fullstendig gyldig løsning. Selv om teknikken gjør det samme som å bruke tables, endres ikke semantikken til elementene slik som den gjøres ved layout-tables. Browser-support er et gyldig poeng, og hvis du koder for noen som krever IE7-støtte ville jeg hoppet rett på et grid-framework. Her er et eksempel: http://jsfiddle.net/HHKnn/1/ . Siden du er ny i CSS ville jeg kanskje droppet det med det første.

2. Som sagt, trykk CTRL+SHIFT+J (Chrome), trykk på <div>-en i koden og trykk så på Metrics i sidebaren. Da ser du et bilde som viser margin, padding og border til elementet, og elementet highlightes på skjermen. Nyttig.

3. Et triks er å sette bredde 0% på <td>-ene. Da vil de få samme bredde om det er mulig.

4. Jeg skriver bare store tabeller rett ut. Det finnes ingen enklere måte så vidt jeg vet. (Utenom serverside)

Jeg har fått med meg at det er uglesett, jeg er bare usikker på HVORFOR det er uglesett..? Og hva betyr "eldre nettlesere"? Sånn typ "helt-usannsynlig-at-noen-fremdeles-har-det"-nettlesere?

Det er ikke noe annen relevant CSS (såvidt jeg ser) for noen av div'ene. Her er koden for bildet + øverste menykategori.
"Innhold" og "info" har bare en helt enkel tekststreng i seg.
Slik ser resultatet ut:
http://bildr.no/thumb/1161771.jpeg
Tips..?
Skal prøve disse tabelltipsene deres nå, så får jeg heller poste resultatet etterpå.. :-) Takk!

Ser forresten ikke noe galt her. Border 1, padding 10, og innhold 685x16 (en linje, full bredde). Skjønner bare ikke hvorfor den begynner så langt nede. Når jeg holder musen over padding, så blir alt tomrommet markert, både over og under tekstlinjen. Men selv om det står 10,10,10,10 på "ikonet" i sidemenyen, så blir det enormt rom over tekstlinjen på selve nettsiden..