Border between divs

Question

I am new to CSS and was wondering how to put a border between divs in this case in the middle between green and blue?

Html:

<div class="wrap">
<div class="left">

</div>
<div class="right">

</div>

CSS:

.wrap {
  background: gray;
  overflow: hidden;
  width: 1024px;
   min-height: 400px;
  position: relative;
  margin: auto;
}

.right {
  float: right;
  width: 70%;
  min-height: 550px;
  background: blue;
  position: relative;
  border-left: 1px solid;
}

.left {
  float: left;
  width: 30%;
  min-height: 550px;
  background: green;
  margin: auto;
  border-right: 1px solid;
}

Answer 1

There are a couple of ways to solve this:

The easiest one would be using box-sizing: border-box; which will make the border part of the element's box. Therefore 30% + 70% will still add up to a 100%. Yet, this is only partially supported.

.right, .left{
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

See a fiddle for this one.

Another approach you could use would be using absolute positioning instead of floating (therefore causing a simple overlap of the elements taken out of the document flow):

.right, .left{
  float: none;
  position: absolute; //make sure the parent element has relative positioning here
}
.right{
  right: 0;
}
.left{
  left: 0;
}

See another fiddle

Then, there's also calc (which isn't too well supported), that lets you subtract one pixel off your percentage value:

.left{
   width: -webkit-calc(30% - 1px);
   width: -moz-calc(30% - 1px);
   width: calc(30% - 1px);
}
.right{
  width: -webkit-calc(70% - 1px);
  width: -moz-calc(70% - 1px);
  width: calc(70% - 1px);
}

Again, a fiddle