0

Eu possuo uma div, welcome-inputs e dentro dela outras duas left e right

A left precisa estar do lado esquerdo da welcome-inputs e a right do lado direito da welcome-inputs.

Ambas tem width = 100px

Preciso por uma linha que fique no meio das duas, sinalizando a separação.

Vejam o codigo jsfiddle.

A linha em vermelho precisa estar no meio das imagens (que representam left e right)

5
  • 5
    A tua edição mudou radicalmente a solução adequada para lidar com o teu problema...
    – Zuul
    Commented 16/12/2014 às 17:24
  • 3
    Se ao menos você explicar qual o problema com as respostas dadas, podemos tentar melhorar.
    – Largato
    Commented 17/12/2014 às 1:10
  • @Bacco, você que respondeu abaixo, isto aqui parece mais uma pergunta camaleão que precisa de Rollback (v3?) do que ser fechada, não?
    – brasofilo
    Commented 2/04/2016 às 6:39
  • @brasofilo ai não sei se bagunça a do Renan. Talvez seja o caso de fechar e depois quem sabe ela acabe sumindo...
    – Largato
    Commented 2/04/2016 às 19:38
  • Caro User 3163662, por favor, não mude radicalmente sua pergunta depois de obter respostas ao problema inicial. Desse jeito, você presta um desserviço ao site e aos colegas que tomaram tempo em responder à primeira versão. Por favor, confira O que fazer quando o O.P muda sua pergunta?
    – brasofilo
    Commented 3/04/2016 às 3:09

3 Respostas 3

5

Um exemplo simples de como por uma linha no meio, usando 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>

Tem outras maneiras de fazer, mas sem mais detalhes na pergunta, ficariamos o dia todo testando alternativas.

4
  • editei a pergunta, acho que esclareci. Commented 16/12/2014 às 17:20
  • @user3163662 atualizei a resposta, execute em "pagina toda" pra ver se é mais ou menos isso, e mude a janela do browser pra ver o tamanho quando encolhe a pagina.
    – Largato
    Commented 16/12/2014 às 17:25
  • veja este jsfiddle.net/gn1asdmh ele é mei codigo, porem a linha nao fica no meio.. Commented 16/12/2014 às 17:42
  • 1
    Já tinha visto seu código, do jeito que vc montou a estrutura fica complicado de usar. Melhor não complicar tanto. Você aproveitou o que eu fiz, mas enfiou o float-right lá de novo... ai não vai mesmo. Como eu disse no comentário que fiz na resposta, sem saber melhor o que vai em cada parte das divs, e como é pra ficar o resultado final, fica dificil saber o melhor caminho.
    – Largato
    Commented 16/12/2014 às 17:47
2

Uma solução passa por fazer uso da propriedade de CSS box-sizing onde podemos indicar que queremos que a largura dos elementos inclua padding e border:

box-sizing:border-box;

Desta forma, podemos dar uma borda a um dos elementos e visualmente é impercetível o desfasamento microscópico que efetivamente existe.

De igual forma, os elementos estão sempre a ocupar 50% da largura do seu elemento pai:

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>


Exemplo também no JSFiddle.

1
  • editei a pergunta, acho que esclareci. Commented 16/12/2014 às 17:21
2

Podem existir propostas melhores que sejam sem gambiarras mais elegantes. Uma ideia consiste basicamente em inserir um elemento <span> entre suas <divs> .left e .right, algo como se fosse um separador.

* {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='https://i.sstatic.net/Vmii1.jpg' alt=''/>
    </div>
    <span class='separator'></span>
    <div class='right'>
        <img src='https://i.sstatic.net/Vmii1.jpg' alt=''/>
    </div>
</div>

4
  • 1
    Eu acho que a sua resposta resolve bem para a versão atual da pergunta. Agora é só torcer para não mudar tudo de novo :)
    – Largato
    Commented 17/12/2014 às 1:29
  • @Bacco e renan Obrigado pela ajuda, desculpe se de alguma forma deixei confusa a pergunta é atrapalhei o esclarecimento correto, me ajudou muito, vlw.. Commented 18/12/2014 às 19:25
  • @Bacco continuei sem entender o que ele realmente queria. Commented 19/12/2014 às 9:04
  • @renan mistérios... o mundo é cheio de mistérios... :D
    – Largato
    Commented 19/12/2014 às 18:01

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .