Ir para conteúdo

POWERED BY:

Arquivado

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

bcs_ptx

alinhamento

Por , em Desenvolvimento frontend

Recommended Posts

bcs_ptx    0

bcs_ptx
Postado

pessoal quero fazer duas colunas com div, e abaixo das colunas outra div, tipo rodape, mas de acordo que o conteúdo das colunas vão crescendo o rodape vá baixando, mas não é isso oque está acontecendo, oque tem de errado?

 

<div style="border:1px solid #000; position:relative;">
        <div>
        	<div style="float:left; width:200px;">
        	  <p>s</p>
        	  <p>fdg</p>
        	  <p>dfgds</p>
        	</div>
          	<div style="float:right; width:650px;">
          	  <p>sd</p>
          	  <p>dfg</p>
          	  <p>fdgs</p>
          	</div>
        </div>
    </div>
        
    <div>teste</div>

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Maykel-ctba    233

Maykel-ctba
Postado

Olha, eh que você está flutuando o ultimo elemento a direita. Como ele não tem mais base embaixo, vai dar problema.

 

Existem diversas maneiras de consertar, acho que a mais rápida é colocar assim:

 

<div style="clear:both;">teste</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heitor Sousa    9

Heitor Sousa
Postado

 

pessoal quero fazer duas colunas com div, e abaixo das colunas outra div, tipo rodape, mas de acordo que o conteúdo das colunas vão crescendo o rodape vá baixando, mas não é isso oque está acontecendo, oque tem de errado?

 

<div style="border:1px solid #000; position:relative;">
        <div>
        	<div style="float:left; width:200px;">
        	  <p>s</p>
        	  <p>fdg</p>
        	  <p>dfgds</p>
        	</div>
          	<div style="float:right; width:650px;">
          	  <p>sd</p>
          	  <p>dfg</p>
          	  <p>fdgs</p>
          	</div>
        </div>
    </div>
        
    <div>teste</div>

Cara, faça css externo e estude um pouco sobre position:relative, pois não é difícil, acho que é isso que você precisa?

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
*{
margin:0;
border:0;	
	
}
#esq {
	position:relative;
	width:200px;
	height:500px;
	float:left;
	background-color:#FF0;
	
}
#dir {
	position:relative;
	width:200px;
	height:500px;
	float:right;
	background-color:#FF0;
	
	
}
#rodape {
	position:relative;
	width:100%;
	height:115px;
	float:left;
	background-color:#666;

	

}
</style>
</head>

<body>
<div id="esq"></div>
<div id="dir"></div>
<div id="rodape"></div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Tiago Sabadini    3

Tiago Sabadini
Postado 




/* O position relative é realmente importante? Se for apenas uma estrutura, veja esta... */



#all{



    width:950px;



    margin:0 auto;



}



#all:after{



    content: " ";



    display:block;



    clear:both;



}



#left{



    float:left;



    widht:200px;



    height:400px;



}


 



#right{



    float:right;



    widht:750px;



    height:400px;



}



#rodape{



    width:950px;



    margin:0 auto;



}









<div id="all">



    <div id="left"></div>



    <div id="right"></div>



</div>



<div id="rodape"></div>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito