1px border messing up with 100% width split page

Question

so lets say I want 80% page red, 20% page blue. It works.

But if I add a 1px border to any of them, it is ruined.

 .left {
        float:left; 
        width: 80%;
        background-color: red;
        height: 400px;
        border-right:1px solid black;

    }

.right {
float: right;
    background-color: blue;

    height: 400px;
    width: 20%;
}

JSfiddle: http://jsfiddle.net/38w4pLg0/

Can I have a border without ruining it?

Answer 1

box-sizing: border-box

---

Set this property on the boxes. The total size of the box will now be made to include the border.

By default, this property is set to content-box which only counts the box's interior - padding + border are excluded from the calculations.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

---

Example for your question:

.left {
    box-sizing: border-box;
    border-right: 1px solid black;
}

Or, preferred, add a new class for all of the boxes:

.box {
    box-sizing: border-box;
}