Ir para conteúdo

Arquivado

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

Hugo Borges_120734

div sobrepondo outra

Recommended Posts

Galera estou com um problema e não sei como resolver. Criei 2 div uma do lado a outra. Elas ficam normal, porem se eu diminuir o tamanho da janela do navegador, uma div sobrepõe a outra. Queria que isso fosso bloqueado igual a uma tabela. segue fotos.

 

 

foto normal

Captura_de_Tela_2014_08_25_s_20_23_54.pn

 

 

Foto da div sobrepondo com o navegador menor

 

Captura_de_Tela_2014_08_25_s_20_24_08.pn

 

Segue o código.


<html>

<head>

  
  <style>
  
  body { 
        margin:0;
        color:#000;
	    font-family: Verdana, sans-serif;
	    font-size: 11px;}
  
.menu_lateral_sub {
  width: 34px;
  background: #ebebeb;
  position:fixed;
  height:100%;
}

#pagina {
	float:right;
	width: 96%;
	margin-top:35;
	margin-right:10;
}
  
  
  </style>
  
</head>
<body >

<!-- Menu lateral -->
<div class="menu_lateral_sub">

ss
</div>
<!-- FIM Menu lateral -->



 <!-- PAGINA -->
 <div id="pagina">
  adfdsafsdafasdfsafsm afmnbsafsafsdafsfsafsafsafsafasf
 </div>
 <!-- FIM IPAGINA -->


</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá! Você pode usar media queries, para em tal resolução elas ficar um abaixo da outra.

http://tableless.com.br/introducao-sobre-media-queries/

http://www.devmedia.com.br/utilizando-css-media-queries/27085

 

Espero ter Ajudado ;)

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deixa esse cara aqui #pagina sem float, e com width: 100%.

 

Ai vc compensa com um padding-left para a lateral fixed não sobrepor o conteúdo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

ok segue o código para quem for útil. Obrigado galera pela ajuda :)

<html>

<head>

  
  <style>
  
  body { 
        margin:0;
        color:#000;
	    font-family: Verdana, sans-serif;
	    font-size: 11px;}
  
.menu_lateral_sub {
  width: 34px;
  background: #ebebeb;
  position:fixed;
  height:100%;
}

#pagina {
	padding-left:40;
	width: 96%;
	margin-right:10;
}
  
  
  </style>
  
</head>
<body >

<!-- Menu lateral -->
<div class="menu_lateral_sub">

ss
</div>
<!-- FIM Menu lateral -->



 <!-- PAGINA -->
 <div id="pagina">
  adfdsafsdafasdfsafsm afmnbsafsafsdafsfsafsafsafsafasf
 </div>
 <!-- FIM IPAGINA -->


</body>
</html>

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.