JCorriveau JCorriveau - 4 months ago 16
HTML Question

Inline-block div losing right border

Using this code, I get two div side by side as I want. Except, the right border of the second div is missing. It seems like a size issue, as if the div was out of scope... How can I fix this?

I tried to add margins, nothing works...



.wrapper {
width: 100%;
white-space: nowrap;
overflow: hidden;
}

.left {
width: 50%;
height:10px;
border: 1px solid;
display: inline-block;
}

.right {
width: 50%;
height:10px;
border:1px solid;
display: inline-block;
margin-left: -1px;
}

<body style="margin-right: 50px">
<div class="wrapper">
<div class="left"></div><div class="right"></div>
</div>
</body>




Answer

I think you are looking for box-sizing:border-box;

.wrapper {
       width: 100%; 
       white-space: nowrap;
       overflow: hidden;
    }
    
    .left { 
        width: 50%; 
        height:10px;
        border: 1px solid; 
        display: inline-block;
        box-sizing:border-box;
        border-right-width :0
    }
    .right {
        width: 50%; 
        height:10px; 
        border:1px solid; 
        display: inline-block;
         box-sizing:border-box;
    }
<div class="wrapper">
        <div class="left"></div><div class="right"></div>
      </div>

box-sizing reference

The box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.

The width and height properties include the content, the padding and border, but not the margin.