Hvordan sentrere flere div's, som er ved siden av hverandre?

[WillY-]

Jeg vet at for å sentrere én div i en div, så kan man bruke margin:0px auto; Men hva hvis det er mer enn én div? Som på dette bilde:

 

 

Trodde jeg var smart og kunne gjøre noe slikt med margin:

 

#Div1 { height:356px; width:200px; float:left; margin:0px 10px 0px auto; }
#Div2 { height:356px; width:200px; float:left; margin:0px auto; }
#Div3 { height:356px; width:200px; float:left; margin:0px auto 0px 10px; }

Men det nytta lite. Seriøst.. hvor mye jobb skal det være å få sentrert dem?!

 

Edit: Det var egentlig en ul li meny jeg prøvde å sentrere. Men regner med det blir det samme med div's? Hvis noen skulle vite om en måte å sentrere menyen på, så vil jeg gjerne vite!

Det nytter ikke å jukse det til med å f.eks flytte ul elementet 50% (noe jeg prøvde) siden det er mobile side. Som ikke har store bredden..

At den skal være skalerbar i bredden etter horisontal eller vertikal visning på mobil, gjør det også litt tricky..

Endret 30. september 2010 av WillY-

[Lag-en-hjemmeside]

Hva med å legge div'ene/menyen i en div som omslutter alle tre og så sentrere den med "margin:0 auto"? Angi en bredde som tilsvarer bredden til de tre elementene som skal ligge inni div'en.

Endret 30. september 2010 av Lag-en-hjemmeside

[WillY-]

Hva med å legge div'ene/menyen i en div som omslutter alle tre og så sentrere den med "margin:0 auto"? inni div'en.

Jeg prøvde faktisk det. Prøvde på nytt nå og fikk det til! Jeg hadde en CSS streng som satte alle div's til float:left;. Litt vel mye rot i denna CSSen nå etter alle de forskjellige forsøka

 

Jeg prøvde også på nytt i en helt blank side, men den nekta å omslutte de andre. Og så, så jeg den:

Angi en bredde som tilsvarer bredden til de tre elementene som skal ligge

Den fiksa det visst

 

Takker så mye!

[Lag-en-hjemmeside]

Jeg prøvde også på nytt i en helt blank side, men den nekta å omslutte de andre. Og så, så jeg den:

Angi en bredde som tilsvarer bredden til de tre elementene som skal ligge

Den fiksa det visst

 

Takker så mye!

 

Ja, glemte å skrive det først. Om du ikke angir en bredde tar div'en opp så mye plass som mulig, og da hjelper det jo ikke om den er sentrert.

 

Edit: Et smart triks når man holder på med div'er som ikke oppfører seg som man vil/venter er å legge til "border:1px solid black", gjerne med forskjellige farger om det er vanskelig å holde oversikten, så ser man lett hvordan div'ene oppfører seg. Husk at da tar div'en 2px ekstra plass i bredden/høyden (kantlinjen legges til bredden på hver side).

Endret 30. september 2010 av Lag-en-hjemmeside

[Matsemann]

Eventuelt Web Developer Toolbar (finnes til Firefox, aner ikke til andre nettlesere). Den lar deg trykke på outline-> og så velge alternativer. Kan man se ting veldig greit.

[WillY-]

IE og Opera har veldig fine web dev verktøy innbygd! (F12 i IE) Kan ikke se at det følger med noe til Firefox

[Lag-en-hjemmeside]

IE og Opera har veldig fine web dev verktøy innbygd! (F12 i IE) Kan ikke se at det følger med noe til Firefox

 

Det følger ikke med, men det er mulig å laste ned og innstallere en add-on: Web developer tool

[Vibeke S]

Ikke glem firebug! Uunnværlig når det gjelder feilsøking og debugging.

[WillY-]

Takk for tipset!

Minner meg veldig om Opera sin egentlig