Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
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;
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:
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>Ou reposiona a terceira div com margens:
<!doctype html>
<html lang="pt-br" dir="ltr">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>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: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
Poste o html e o css aqui para podermos analisar melhor.
Mais possivelmente um float resolve o seu problema: http://www.richardbarros.com.br/blog/css/css-truques-para-dominar-a-propriedade-float