CSS, center separator between left and right [closed]

Question

CSS, center separator between left and right [closed]

Navigation

#1 by (5 votes)
#2 by (2 votes)
#3 by (2 votes)

0

I have a div, welcome-inputs and within it another two left and right

left must be on the left side of welcome-inputs and right on the right side of welcome-inputs .

Both have width = 100px

I need a line that stays in the middle of the two, signaling the separation.

See the jsfiddle code.

The red line must be in the middle of the images (representing left and right)

javascript html css

asked by anonymous 16.12.2014 / 17:42

3 answers

PHP is not displaying array result Execute a method on the ManagedBean when initializing the Page

score 5 · Answer 1

A simple example of how to by 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 further details on the question, we would be testing alternatives all day.

score 2 · Answer 2

One 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 a border to one of the elements and visually it is imperceptible the microscopic mismatch that actually exists.

Similarly, elements are always 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>

Example also in JSFiddle .

score 2 · Answer 3

There may be better proposals that are more elegant without gambiarras . One idea is basically to insert a <span> element between your <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>