Bordure sur des éléments en float 50% sans décallage

Voici une astuce pour éviter que 2 divs alignés horizontalement ne se mettent l’un en dessous de l’autre quand on leur ajoute une bordure.

Voici le code de base :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style>
        .box-1 {
        width:50%;
        float:left;
        background: #b294ff none;
    }
    .box-2 {
        width:50%;
        float:left;
        background: #94baff none;
    } 
    </style>
</head>
<body>
    <br />
    <div class="box-1"><br />.box-1<br /></div>
    <div class="box-2"><br />.box-2<br /></div>
</body>
</html>

 

Ce code donne :

float

 

En y ajoutant une bordure, cela donne :

<style>
    .box-1 {
    width:50%;
    float:left;
    background: #b294ff none;
    border:1px solid #5729ff;
}
.box-2 {
    width:50%;
    float:left;
    background: #94baff none;
    border:1px solid #5729ff;
} 
</style>

 

et en image :

float-border

 

La solution est d’ajouter la propriété box-sizing:border-box; aux deux divs, pour donner :

border-box

 

Pour être encore plus radical, vous pouvez ajouter cette ligne en haut de votre fichier css principal :

* { box-sizing:border-box; }

 

La bordure et le padding sera donc à l’intérieur des éléments au lieu d’être à l’extérieur.

Fonction OnClick jQuery accessible via le clavier
Mettre une page de Magento en noindex

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *