Ordinair HTML/CSS margin/padding boxmodel probleem - Softwareontwikkeling

woensdag 22 januari 2014 18:10

Acties:

Topicstarter

Hey,

Na enige tijd niet meer geknutseld te hebben met HTML etc, wilde ik mijn foto-galerij even een 2014-update geven met oa HTML5 en andere mooie termen. Ik kom echter op een heel eigenaardige rendering uit (die -uiteraard- niet is zoals ik wil) in FF26. Hieronder een testcase:

HTML:

<!DOCTYPE html>
...
<div id="lb">
  <div id="foto">
img
  </div>
  <div id="uitleg">
    exif etc
    <div style="width:180px">test-div</div>
  </div>
</div>
...

met

Cascading Stylesheet:

1
2
3

#lb {position: absolute; width:1000px; background: #fafafa; padding:10px;}
#uitleg {width:190px; height: 600px; background: #fce; float: right;padding:5px;}
#foto {width: 800px; height: 600px; background: #fce;}

Probleem:
Ik had verwacht dat de padding van de container (#lb) "in" de 1000px zou vallen, doch de container wordt width + 2x padding. OK, kan ik mee leven al is dit buiten verwachting.

De uitlegbox maak ik 190px breed, zo krijg ik een mooie scheidingslijn van 10px tussen beide boxen, even breed als de padding van de container. So far so good.

Ik geef de uitleg box ook een 5px padding zodat de tekst niet tegen de rand geplakt zit. Aj. Ook hier wordt de padding bij de width geteld, wat resulteert in een grotere box dan verwacht: 190+5+5 x 600+5+5.

Nu vroeg ik me af of het box-model in HTML5 anders is dan HTML4 (kan ik me niet herinneren) en wat deze foute rendering triggert? De position lijkt er niets aan te doen alsook de float niet (wat mijn eerste verwachting was). Meer redenen kon ik niet verzinnen :x .

woensdag 22 januari 2014 18:20

Acties:

Cosca

Het is niet fout, het klopt namelijk gewoon.
Dit kun je wijzigen door een andere box-sizing te gebruiken:

content-box: width + padding + border = totale breedte (standaard)
padding-box: width + border = totale breedte
border-box: width = totale breedte

Het volgende lost je probleem op en geeft het weer zoals jij verwacht

Cascading Stylesheet:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

woensdag 22 januari 2014 18:23

Acties:

NMe

Quia Ego Sic Dico.

Waarbij het handig is om op te merken dat padding-box FF-only is op het moment.

Het is trouwens maar net de vraag of alle elementen een andere box-sizing zo bevorderlijk is in een bestaande site, maar wanneer je het doet op alleen de relevante elementen kom je er uiteraard ook.

[ Voor 55% gewijzigd door NMe op 22-01-2014 18:24 ]

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.

woensdag 22 januari 2014 18:29

Acties:

moozzuzz

Topicstarter

Hmmm was ik zo 200% overtuigd dat het standaard border-box is. Het is duidelijk hoog tijd voor wat opfrissing! :^). Alvast bedankt voor de snelle reactie.