Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

albertinho77

Como colocar duas divs um do lado da outra centralizada?

Recommended Posts

Eu queria deixar a Div destaque e a div conteudo uma ao lado da outra e ao msm tempo centralizadas junto com a logo e o menu ja defini um tamanho. Deixei uma imagem com o exemplo mais os codigos css e html usados

 

s5vxcpo.jpg

 

Codigo Html:

  <div id=destaque>
     <p>
     <h3><center>Em Destaque:</center></h3>
     </p>
     
     
     
  </div>


  
  <div id=conteudo>  
     <pre>
     
     
     <br><title>Post 2</title>
     <p><img src="img/kiseijuuep2.jpg" align="left"></p>
     <center><p> Kiseijuu Sei no Kakuritsu - Episódio 2</p></center>
     <center><p> Exibição</p></center>
     <center><p><a href="#">Assistir Online</a>
     <center><p><a href="#">Ver Todos Episódios</a>
            
     <br><title>Post 1</title>
     <p><img src="img/kiseijuuep1.jpg" align="left"></p>
     <center><p> Kiseijuu Sei no Kakuritsu - Episódio 1</p>
     <center><p><a href="#">Assistir Online</a>
     <center><p><a href="#">Ver Todos Episódios</a>
     
     
   
      <br><title>Post 1</title>
     <p><img src="img/deathbilliardsova.jpg" align="left"></p>
     <center><p> Death Billiards - OVA</p>
     <center><p><a href="#">Assistir Online</a>
     <center><p><a href="ovasfilmes/deathbilliards.html">Ver Todos Episódios</a>
   
    </pre>
  </div>
  
  





</body>


</html>

Css:

#destaque{ margin: 0px auto; 
 height: 280px;
 width: 280px;
 background: #999;
 float: left; 


}




#conteudo{
 margin: 0px auto;
 float: left;  
 height: auto;
 width: 780px;
 background: #FFF; 


}

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eu faria da seguinte forma:

 

HTML:

<div id="pai">
       <div id="esquerda">
              Sou a div do lado esquerdo
       </div>
       <div id="direita">
              Sou a div do lado direito
       </div>
       <div id="clear"></div> <!-- Ajusta o tamanho da div PAi. -->
</div>
CSS:

 

 

#pai {
width:90%; // Pode utilizar px ou qualquer outra medida
margin:auto; // Deixaria no centro, margem automática para direita e esquerda

#esquerda {
width:70%; // Pode utilizar px ou qualquer outra medida
float:left; // Deixa ela do lado esquerdo
}

#direita {
width:30%; // Pode utilizar px ou qualquer outra medida
float:right; // Deixa ela do lado direito
}

#clear {
clear:both; // Ajusta o tamanho da div #pai por causa dos float left e right
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.