Trøbbel med float

[Teig]

Som tittelen sier, har jeg litt problemer med å få float til å gjøre som jeg vil. Jeg har 3 bokser som jeg vil ha stilt ved siden av hverandre, da den midterste er fullstendig midstilt. Men problemet er at den midterste ikke vil stille seg midt i, men den klines helt til venstre. Se bildet (boksen med rød ramme er problemet). Jeg har prøvd å sette margin: 0 auto; på #boksmiddle, men da skjer det ingenting.

 

#boksleft {
  width:20%;
  height:auto;
  float:left;
  border: 1px solid #000;

}
#boksmiddle {
  width:20%;
  height:auto;
  float:right;
  border: 1px solid red;

}
#boksright {
  width:20%;
  height:auto;
  float:right;
  border: 1px solid #000;

}

 

Noen som vet hva problemet er?

[øl_i_tastaturet]

Prøv å sette alle til float:left?

Endret 2. januar 2008 av Bjørshol

[Pilot_]

Du fyller jo bare opp 60% av 100%, så det vil jo naturligvis bli et glipp når du floater både til venstre og høgre.

[Dexzy_0]

Prøv å sett boksmiddle til float: center; istede sånn som jeg har gjort under her:

 

 

#boksleft {

width:20%;

height:auto;

float:left;

border: 1px solid #000;

 

}

#boksmiddle {

width:20%;

height:auto;

float:center;

border: 1px solid red;

 

}

#boksright {

width:20%;

height:auto;

float:right;

border: 1px solid #000;

 

}

 

[øl_i_tastaturet]

float: center; ?

[Stian Jacobsen]

Prøv å sett boksmiddle til float: center; istede sånn som jeg har gjort under her:

 

 

#boksleft {

width:20%;

height:auto;

float:left;

border: 1px solid #000;

 

}

#boksmiddle {

width:20%;

height:auto;

float:center;

border: 1px solid red;

 

}

#boksright {

width:20%;

height:auto;

float:right;

border: 1px solid #000;

 

}

Hvorfor ikke bare bruke

float: around; eller float: somewhere;

 

Fra spøk til alvor, ikke hør på hva Dexzy_0 sier, dette er en person som ikke kan verken html eller CSS. (Ta en titt på de innleggene han har skrevet)

 

Bruk float: left; på alle div'ene

definere riktig bredde, eks:

er bredden på containeren 800px og har padding på 5px gjenstår det 790px. Problemet er at om du bruker 50% på den ene, 30% på den andre og 20% på den siste, tilsvarer dette 800px og ikke 790px.. Du har to valg.

1. Bruk pikseler isteden for %

2. Regn ut sånn ca hva % blir, regn også litt whitespace inn..

 

Dersom du ikke bruker padding på containeren, så er dette ganske enkelt.

La oss si du bruker totalt 9% av bredden til whitespace

div#forste {
 width: 30%;
 float: left;
}
div#andre {
 width: 30%;
 float: left;
 margin: 0 36px 0 36px; // top-left-bottom-right
}
div#tredje {
 width: 30%;
 float: left;
}

 

30% = 240px;

9% = 72; (delt på to er 36px)

 

Da mangler du 1%.. med dette får du litt plass på sidene dersom du bruker

margin: 0 auto; i containeren

Endret 3. januar 2008 av Stian Jacobsen

[Teig]

Fikk det til ved at jeg justerte #boksmiddle med margin-left.

 

#boksleft {
  width:20%;
  height:100px;
  float:left;
  border: 1px solid #000;

}
#boksmiddle {
  width:20%;
  height:100px;
  margin-left:19.7%;
  border: 1px solid red;
  float:right;

}
#boksright {
  width:20%;
  height:100px;
  float:right;
  border: 1px solid #000;

}