Ir para conteúdo

Arquivado

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

Biel.

posicionar div_2 ao lado da div_1

Por , em Desenvolvimento frontend

Recommended Posts

Biel.    9

Biel.
Postado
posicionar div_2 ao lado da div_1
boa tarde a todos. direto ao ponto. Pessoal abaixo temos 2 divs
div_1 e div_2. Gostaria que a div_2 ficasse do lado da div_1 e não por baixo.
Quero que a div_1 fique fixa na tela, conforme está. Já a div_2 é para rolar na tela normalmente, mas que não fique por baixo
da div_1 e sim ao lado.
<!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>Untitled Document</title>

<style>
#div_1{ width:100px; height:400px; float:left; background:#C03; 
margin:0px 0px 0px 0px; font-size:24px; color:#FFF;  position:fixed;}

#div_2 { width:200px; height:2000px; float:left; background:#09F; 
margin:10px 10px 50px 10px; text-align:right; font-size:24px; color:#FFF;}
</style>

</head>
<body>

<div id="div_1">div 1</div>
<div id="div_2">div 2</div>

</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Biel.    9

Biel.
Postado

angelorubin, obrigado por postar. Como faço para obter o mesmo resultado que vc fez deixando a div_1 fixa e a div_2 rolar normalmente na tela?

Compartilhar este post

Link para o post
Compartilhar em outros sites

jdsdias    4

jdsdias
Postado

Acho que vai precisar remover o position fixed da primeira div senão não vai dar certo

<!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>Untitled Document</title>

<style>
#div_1, #div_3 { width:100px; height:400px; float:left;}

#div_2 { width:200px; height:2000px; float:left; background:#09F; 
margin:10px 10px 50px 10px; text-align:right; font-size:24px; color:#FFF;}

#div_3 { background:#C03; margin:0px 0px 0px 0px; font-size:24px; color:#FFF;  
position:fixed;}
</style>

</head>
<body>

<div id="div_1"><div id="div_3">div 1</div></div>
<div id="div_2">div 2</div>

</body>
</html>

No caso do código acima a primeira div só da o tamanho e o float left, enquanto que a 3 div fica com

 

o position fixed

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