Ir para conteúdo

POWERED BY:

Arquivado

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

Diegonaweb

[Resolvido] Problema com DIVs

Por , em Desenvolvimento frontend

Recommended Posts

Diegonaweb    0

Diegonaweb
Postado

Boa noite,

 

pessoal, estou com um probleminha, é o seguinte:

 

eu tenho 1 div que engloba o conteudo do site.

dentro dessa div tenho 3 divs, uma ao lado da outra, porém, a altura delas são diferentes.

a primeira e a segunda tem a msm altura, a terceira é um pouco maior.

entao quando eu crio outra div depois da terceira, ela fica alinhada, na altura da terceira div.

gostaria que ela se ajustasse com as 2 primeiras, assim a terceira ficaria do lado direito dela.

ja tentei usar position absolute, mais ai ela fica por cima de tudo.

alguem tem uma solução?

aguardo e obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegonaweb    0

Diegonaweb
Postado

opa, o float nao resolve não amigo, como o css é um pouco grande, vou fazer um exemplo simples rapidinho pra voces entenderem:

 

#conteudo {
width: 600px;
}
#div1 {
width: 200px;
height: 100px;
float: left;
position: relative;
}
#div2 {
width: 200px;
height: 100px;
float: left;
position: relative;
}
#div3 {
width: 200px;
height: 200px;
float: left;
position: relative;
}
#div4 {
width: 400px;
height: 100px;
float: left;
position: relative;
}

 

<div id="conteudo">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>

 

queria que a div4 ficasse abaixo da div1 e div2 e ao lado esquerdo da div3.

 

aguardo e obrigado;

Compartilhar este post

Link para o post
Compartilhar em outros sites

P@trique    0

P@trique
Postado

Entendi, aguarde até que um moderador mova seu tópico para a seção correta, pois esta na seção javascript/dhtml e o correto seria na seção Webstandards: CSS / XML / XHTML / HTML, lá o pessoal poderá te ajudar melhor e mais rapidamente.

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

rafael-tdc    13

rafael-tdc
Postado

Probleminha treta eim :P

 

Eu fiz seu exemplo aqui, quebrei a cabeça tentando colocar clear both, mas nada...

Do nada veio a brilhante ideia:

Na div 3 poe float:right;

 

Código:

 

<!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>
<title></title>
<style type="text/css">
#conteudo {
width: 600px;
}
#div1 {
width: 200px;
height: 100px;
float: left;
position: relative;
background:#F00;
}
#div2 {
width: 200px;
height: 100px;
float: left;
position: relative;
background:#00F;
}
#div3 {
width: 200px;
height: 200px;
float: right;
position: relative;
background:#0F0;
}
#div4 {
width: 400px;
height: 100px;
float: left;
position: relative;
background:#FF0;
}
</style>
</head>
<body>
<div id="conteudo">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</div>
</body>
</html>

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Ou reposiona a terceira div com margens:

 

<!doctype html>
<html lang="pt-br" dir="ltr">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
div {
height: 200px;
width: 200px;
border: 5px solid red;
float: left;
}
.teste3 {
height: 250px;
margin: 210px 0 0 -210px;
}
.teste4 {
clear: left;
margin: -260px 0 0 0;
}
</style>
<div class="teste1">Teste 1</div>
<div class="teste2">Teste 2</div>
<div class="teste3">Teste 3</div>
<div class="teste4">Teste 4</div>

 

:thumbsup:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegonaweb    0

Diegonaweb
Postado

Obrigado Rafael, o float right resolveu perfeitamente, depois foi só jogar uma margin e pronto.

Não sei como não pensei nisso antes, css tão enorme e complexo que esbarramos em uma coisa tão simples, mais que nao vem a cabeça.

Obrigado

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