Ir para conteúdo

POWERED BY:

Arquivado

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

Vinny Oliveira

Problema com div pulando para baixo?

Por , em Desenvolvimento frontend

Recommended Posts

Vinny Oliveira    4

Vinny Oliveira
Postado

Galera estou precisando de uma ajudinha urgente.

Quero fazer tipo de uma pagina elastica e uma div q fica do lado direito quando diminuo o navegador ela pula para baixo, alguem pode me ajudar?

 

Pagina: 

<html>
<head>
<style type="text/css">
#container{
	min-width: 957px;
	width: 100%;
	height: 260px;
	background:black;
}

#esquerda{
	position:relative;
	width:200px;
	height:200px;
	float:left;
	background:red;
}

#header{
position:relative;
width:70%;
min-width:860px;
height:250px;
float:right;
margin:auto;
background:#cccccc;
}
</style>
</head>
<body>

<div id="container">

		<div id="esquerda"></div>

		<div id="header"></div>


</div>



</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nosreve    12

Nosreve
Postado

Como assim, você quer que uma div siga a pagina quando a mesma for descendo, é isso? Se for tem que usar javascript ou jquery

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nosreve    12

Nosreve
Postado

isso ocorre porque você definiu uma tamanho fixo para div esquerda que é 200px, e a div da direita você esta usando porcentagem, te aconselho usar porcentagem nos dois, a div da direita eu calculei para ela ter 200px uns 15% de width,

 

e tambem você precisa do min-width? isso tambem esta impedindo da div usar os 70% referente ao elemento pai, para funcionar tem que tirar o min-width

Compartilhar este post

Link para o post
Compartilhar em outros sites

salatielq    3

salatielq
Postado

Vinny, li o que o Nosreve falou e funciona mesmo. copiei seu codigo e modifiquei algumas coisa segundo o Nosreve falou, testei e para mim ficou como você queria.

 

dá uma olhada:

 

<html>
<head>
<style type="text/css">
#container{
min-width: 957px;
width: 100%;
height: 260px;
background:black;
}

#esquerda{
position:relative;
width:28%;
height:200px;
float:left;
background:red;
}

#header{
position:relative;
width:70%;
height:250px;
float:right;
margin:auto;
background:#cccccc;
}
</style>
</head>
<body>

<div id="container">

<div id="esquerda"></div>

<div id="header"></div>


</div>



</body>
</html>

 

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