0

Olá a todos eu estou a tentar por uma div ao lado de outra div como podem ver em baixo, eu não tenho a certeza do que estou a fazer mal está aqui o código:

.div {
    background-color: #cecece; 
    margin-right: 700px; 
    padding-bottom: 424px;
    border: inset
}
<!DOCTYPE html>
<html>
<head>
	<title>C#</title>
</head>
<body>
  <div class="div">
   
  </div>
  <div style="background-color: #000; margin-left: 400px; padding-bottom: 424px">
   w
  </div>
</body>
</html>


O código não está a executar muito bem neste post por isso se for preciso veja o resultado nesta página tem de copiar o código.

1 Resposta 1

3

As divs por default têm display block, isto quer dizer que o elemento div vai ser colocado por baixo do elemento anterior:

EX:

div {
  height: 100px;
  width: 50px;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green; 
}
<div id="div1"></div>
<div id="div2"></div>

Para remediar isso pode colocar um float:left:

div {
  height: 100px;
  width: 50px;
  float: left;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green; 
}
<div id="div1"></div>
<div id="div2"></div>

Pode também colocar display:inline-block, mas note que por default este vai colocar uma margin entre os elementos (não percebo porquê, mas acontece) que pode ser retirada se colocar font-size:0 no pai. Neste ultimo exemplo, pode ver isso se retirar font-size:0 da #caixa_pai

#caixa_pai {
  font-size:0;
}
.caixa_filho {
  height: 100px;
  width: 50px;
  display: inline-block;
}
#div1 {
  background-color: red;
}
#div2 {
  background-color: green; 
}
<div id="caixa_pai">
  <div class="caixa_filho" id="div1"></div>
  <div class="caixa_filho" id="div2"></div>
</div>

9
  • Obrigado pela ajuda é que durante o tempo de espera a unica solução que encontrei foi esta .Block {background-color: #cecece; margin-left: 300px; margin-top: -430;padding-bottom: 424px;border: inset; margin-right: 600px;} funcionava mas era má
    – Pekita
    5/08/2016 às 10:13
  • Hehe isso não deve ser bom :P . Obgado, ainda bem que resolveu @Pekira
    – Miguel
    5/08/2016 às 10:16
  • Eu estava aqui continuando a programar e eu gostaria de saber se há alguma maneira de por uma textbox num div sem o div começar a alterar o tamanho <!-- language: lang-js --> <!DOCTYPE html> <html> <head> <title>C#</title> </head> <body> <!--DivCode--> <div class="code"> <textarea rows="10" readonly="readonly" placeholder=""> </textarea> </div> <!--DivBlock--> <div class="block" style=""> </div> <!--DivScript--> <div class="script"> </div> </body> </html>
    – Pekita
    5/08/2016 às 10:41
  • pois eu não faço a minima ideia como por isto como tu posseste
    – Pekita
    5/08/2016 às 10:42
  • Pode sempre colocar um comprimento fixo na div: ex: width:200px; e a textbox: display:block;width:100%;. Não testei mas tenho quase a certeza que resulta @Pekira
    – Miguel
    5/08/2016 às 10:42

Você deve fazer log-in para responder a esta pergunta.

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