CSS, center split line between left and right

Question

I own a div, welcome-inputs and within it two other left and right

To left needs to be on the left side of welcome-inputs and the right on the right side of welcome-inputs.

They both have width = 100px

I need to put a line on half a of the two, signalling the separation.

Look at the code jsfiddle.

The red line needs to be in the middle of the images (which represent left and right)

Answer 1

A simple example of how to put a line in the middle, using border:

div {
  position:relative;      /* Uma espécie de "reset" para os divs se comportarem bem */
  box-sizing:border-box;  /* Ajuste para que o padding não atrapalhe a medida dos 50% */
  padding: 10px;          /* Mera estética da demonstração */
}

.main {
  width: 80%;             /* acrescentei isto baseado no edit da questão e comments*/
  max-width: 600px;
  background-color: blue;
}

.left {
  float:left;             /* Fixamos a div na esquerda */
  clear:both;             /* Forçamos ela a começar em nova linha, caso haja mais divs */
  width:50%;              /* E ajustamos a largura. */
}

.right {
  margin-left:50%;             /* Aqui usamos a margem em vez de float right */
  border-left: 1px dashed white; /* e colocamos a linha separadora */
}

html, body {      /* Daqui pra baixo é só reset e estética do teste. */
  padding:0;
  margin:0;
  width:100%;
}

<div class="main">
  <div class="left">1</div>
  <div class="right">2</div>
</div>

There are other ways to do it, but without more details on the question, we’d be testing alternatives all day.

Answer 2

A solution is to make use of the CSS property box-sizing where we can indicate that we want the width of the elements to include padding and border:

box-sizing:border-box;

In this way, we can give an edge to one of the elements and visually it is imperceptible the microscopic mismatch that effectively exists.

Similarly, elements are always occupying 50% of the width of their parent element:

body {
    background:blue;
}
.left{
    float:left;
    border-right:1px dotted white;
}
.right{
    float:right;
}
.welcomeforms{
    box-sizing:border-box;
    width:50%;
    padding:10px;
}

<div class="welcome-inputs">

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

</div>

---

Also in the Jsfiddle.

Answer 3

There may be better proposals outspoken more elegant. An idea is basically to insert an element <span> among their <divs> .left and .right, something like a separator.

* {box-sizing:border-box;margin:0;padding:0} /*reset*/

.welcome {
    width: 100%;
    height: 200px;
    position: relative;
    background: blue
}

.left, .right { position: absolute }

.left { left: 0 }
.right{ right: 0 }

.left > img, .right > img { width: 100px } /* tamanho das imagens */

.separator {
    position: absolute;
    display: block;
    top: 0; bottom: 0;
    
    width: 5%;
    left: 47.5%; /* 50% (metade) - 5%(largura do separador) */
    max-width: 10px; /* para evitar que ele aumente conforme a porcentagem de largura que é 5% */
  
    background: red
}

<div class='welcome'>
    <div class='left'>
        <img src='http://i.stack.imgur.com/Vmii1.jpg' alt=''/>
    </div>
    <span class='separator'></span>
    <div class='right'>
        <img src='http://i.stack.imgur.com/Vmii1.jpg' alt=''/>
    </div>
</div>