Comment gérer la bordure, l'espacement et la marge avec une taille dynamique (pourcentage) ?

Question

Ma question est de savoir comment gérer la taille d'un élément (disons un div) avec un pourcentage. J'ai une situation où j'ai fait flotter deux divs côte à côte et les deux prennent 50% de la div qui les contient. Chacune de ces deux divs a des bordures de 1px, une marge de 5px et un peu de padding. Je suis donc censé gérer ces tailles statiques et la taille dynamique du contenu (divs). Car dans le cas que je viens de citer, elles ne flotteront pas côte à côte à cause des bordures, du padding et de la marge qui font que la taille est supérieure à (100%).

Quelles sont les solutions ? Dans mon cas, la taille des marges, de l'intercalaire et des bordures est petite, donc je suppose que je pourrais simplement fixer la taille un peu plus bas (comme 45%) et espérer que cela conviendra. Mais je pense que cette méthode est bâclée, car si je règle la taille du padding plus haut, je devrai ajuster la taille de la div par essais et erreurs jusqu'à ce que je trouve la taille parfaite. Existe-t-il une méthode appropriée pour y parvenir ?

Merci beaucoup.

Answer 1

De https://developer.mozilla.org/En/CSS/Box-sizing

/* support Firefox, Safari/WebKit, Opera and IE8+ */

.example {
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
    box-sizing:        border-box;
}

vous pouvez utiliser box-sizing : border-box pour que les 50% s'appliquent à l'intérieur+padding+border, mais malheureusement il n'y a pas de paramètre pour ajouter la marge.

Vous pouvez toutefois utiliser une div à l'intérieur d'une div et utiliser le padding sur la div extérieure pour imiter la marge.

Voici un exemple JSFiddle

Answer 2

Un travail propre peut être réalisé en faisant en sorte que les deux divs flottantes aient une marge et une bordure de 0, et une largeur de 50 %. Ensuite, à l'intérieur de chacune d'elles, vous pouvez placer une div qui correspond à son conteneur, avec une marge et un padding statiques.

Comme alternative, vous pouvez garder tout dynamique, donc mettez quelque chose comme margin:1%, vous obtiendrez un comportement agréable dans le redimensionnement de la fenêtre !