Vinnaren i pepparkakshustävlingen!
2018-11-05, 21:50
  #1
Medlem
har gjort en "hemsida" där jag i min footer har lagt till tre div-element som jag vill ha på rad men centrerat.. ändå hamnar allt intryckt mot vänster istället för att "jämna ut sig" vad gör jag för fel?

Kod:
#footer {

width: 100%;
font-family: 'Arial bold';
font-size: 20px;
color: blue;
clear: both;

}

#div1, #div2, #div3

{
float: left;
margin: 0 auto;

}
Citera
2018-11-26, 18:35
  #2
Medlem
Citat:
Ursprungligen postat av mssoulstar
har gjort en "hemsida" där jag i min footer har lagt till tre div-element som jag vill ha på rad men centrerat.. ändå hamnar allt intryckt mot vänster istället för att "jämna ut sig" vad gör jag för fel?

Kod:
#footer {

width: 100%;
font-family: 'Arial bold';
font-size: 20px;
color: blue;
clear: both;

}

#div1, #div2, #div3

{
float: left;
margin: 0 auto;

}

Varför tusan använder du float idag?

Använd flexbox eller css grid.

Kod:
 <footer>
   <div id="div1">Div1</div>
   <div id="div2">Div2</div>
   <div id="div3">Div3</div>
 </footer>

Kod:
footer {
  width: 100%;
  font-family: 'Arial bold';
  font-size: 20px;
  color: blue;
  display:flex;
  justify-content:center;
}
Citera
2019-08-19, 07:52
  #3
Medlem
GillJungs avatar
Citat:
Ursprungligen postat av IngetNick2
Varför tusan använder du float idag?

Använd flexbox eller css grid.

Kod:
 <footer>
   <div id="div1">Div1</div>
   <div id="div2">Div2</div>
   <div id="div3">Div3</div>
 </footer>

Kod:
footer {
  width: 100%;
  font-family: 'Arial bold';
  font-size: 20px;
  color: blue;
  display:flex;
  justify-content:center;
}

Äldre webbläsare klarar inte av flex...
Citera
2019-08-19, 09:43
  #4
Medlem
Citat:
Ursprungligen postat av GillJung
Äldre webbläsare klarar inte av flex...

https://caniuse.com/#feat=flexbox Det drabbar <2% av användarna.
Citera
2019-08-19, 13:41
  #5
Medlem
GillJungs avatar
Citat:
Ursprungligen postat av IngetNick2
https://caniuse.com/#feat=flexbox Det drabbar <2% av användarna.

Grymt bra sida!
Citera
2019-08-19, 23:43
  #6
Moderator
vhes avatar
Övriga språk --> Webbutveckling och javascript
/Moderator
Citera
2019-09-28, 11:47
  #7
Medlem
Soluss avatar
HTML-kod:
<footer>
    <div id="div1">Div1</div>
    <div id="div2">Div2</div>
    <div id="div3">Div3</div>
</footer>
HTML-kod:
footer {
    text-align: center;
} 
#div1, #div2, #div3 {
    display: inline-block;
    width: 20%;
    text-align: left;
} 

Footer är ett blockelement och behöver således inte width: 100%; för att ockupera hela bredden av sitt förälderelement.
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback