Eu criei algumas divs com um id para usar float left nelas e elas ficarem alinhadas, após a ultima div criada com essa intenção, as próximas divs continuam entrando a direita do ultima caixa ao inves de ser exibido o conteúdo abaixo do conjunto das divs. Só consigo inserir conteúdo abaixo se usar o position relative. Isso é comum? Como eu faço para evitar isso?
Problema com Div e position relative [RESOLVIDO]
E
7 Respostas
N
1 like
Oi… Boa Tarde!
Vc pode postar o código aqui e tirar um print de como fico?
E
<!doctype html>
Home | OdontoPrev<body>
<div id="navegacao">
<div id="area">
<img src="img/img001.png">
<a href="index.html">Início</a>
<a href="planos.html">Planos</a>
<a href="encontre.html">Encontre um dentista</a>
<a href="papo.html">Papo de boca</a>
<a href="duvidas.html">Tire suas dúvidas</a>
</div>
</div>
<div id="imagem-principal">
<img src="img/img002.jpg" width="1250" height="600">
</div>
<h1 id="texto-destacado" class="cinza"> Aqui você encontra planos mensais, anuais e SEM CARÊNCIA, para usar amanhã!</h1>
<div id="area-principal">
<div class="planos">
<img src="img/img003.png">
<h2 class="azul">PROGRAMA
DENTE DE LEITE
DE 0 A 7 ANOS</h2> <br>
<h3>Algumas vantagens </h3>
Consultas com <br>
Especialistas em <br>
Odontopediatria <br>
Aplicação de Flúor e <br>
Selantes
Emergência 24h <br>
Quero saber mais <span class="rosa negrito"> > </span> <br>
<h1 class="rosa">R$14,98 </h1>
<div id="botoes-planos" class="centralizar negrito"> Ver Mais</div>
</div>
<div class="planos">
<img src="img/img003.png">
<h2 class="azul">DENTAL <br>
BEM-ESTAR</h2> <br> <br>
<h3>Algumas vantagens </h3>
Limpezas Periódicas <br>
Restaurações <br>
Tratamento de Canal e <br>
Gengiva <br>
Emergência 24h <br>
Quero saber mais <span class="rosa negrito"> > </span> <br>
<h1 class="rosa">R$45,60 </h1>
<div id="botoes-planos" class="centralizar negrito"> Ver Mais</div>
</div>
<div class="planos">
<img src="img/img003.png">
<h2 class="azul">DENTAL <br>
ESTÉTICA</h2> <br> <br>
<h3>Algumas vantagens </h3>
Placa de Clareamento + Gel <br>
Limpezas Periódicas <br>
Tratamento de Canal <br>
Gengiva <br>
Emergência 24h <br>
Quero saber mais <span class="rosa negrito"> > </span> <br>
<h1 class="rosa">R$115,00</h1>
<div id="botoes-planos" class="centralizar negrito"> Ver Mais</div>
</div>
<div id="duvidas">
<div id="relativo">
<img src="img/img004.png">
</div>
<h2 id="relativo2"> FICOU COM DÚVIDAS?</h2>
<p id="relativo3" class="negrito1">Clique aqui que a OdontoPrev te ajuda a <br>
        criar o plano PERFEITO</p>
</div>
</div>
<div id="segunda-seção">
<div class="cinza negrito">
<h2> Veja todos os nossos planos </h2>
</div>
<div class="cinza negrito">
<h2> Teste1 </h2>
</div>
<div class="cinza negrito">
<h2> Teste2 </h2>
</div>
</div>
</body>
E
- {
padding: 0;
margin: 0;
}
/*Formatação dos IDs */
#navegacao {
margin: 30px;
}
#area{
width: 780px;
margin: 0 auto;
}
#imagem-principal{
margin-top: 40px;
margin-left: 10px;
}
#texto-destacado{
margin-top: 40px;
}
#area-principal{
margin-left: 10px;
margin-top: 40px;
width: 100vw;
}
#botoes-planos {
background: blue;
color: white;
height:30px;
border-radius: 10px;
}
#duvidas {
background-color: pink;
float:left;
margin: 0 10px 10px 0;
width: 230px;
height: 370px;
color:white;
border-radius: 10px;
}
#relativo{
position: relative;
top: 140px;
left: 80px;
}
#relativo2{
position: relative;
top: 140px;
left: 50px;
}
#relativo3{
position: relative;
top: 140px;
left: 5px;
margin-top: 10px;
}
#segunda-seção{
width: 100vw;
}
p {
font-size: 13px;
}
/*Formatação do Menu */
a {
text-decoration: none;
color: gray;
padding: 10px;
float: center;
}
/*Formatação do Classes */
.planos{
float:left;
margin: 0 10px 10px 0;
width: 230px;
}
.azul{
color:blue;
}
.cinza{
color:gray;
}
.rosa{
color:pink;
}
.negrito{
font-weight: 900;
}
.negrito1{
font-weight: 700;
}
.centralizar {
padding-left: 80px;
padding-top: 5px;
}
E
<div class="cinza negrito">
<h2> Veja todos os nossos planos </h2>
</div>
<div class="cinza negrito">
<h2> Teste1 </h2>
</div>
<div class="cinza negrito">
<h2> Teste2 </h2>
</div>
Essa é a parte que não está com eu quero, porque ela esta a direita do conteúdo e não embaixo.
N
1 like
Tenta usar >>
#segunda-seção{
float: left;
margin-top: 380px;
margin-left: -230px;
}
E
1 like
obrigado!
Criado 26 de outubro de 2017
Ultima resposta 26 de out. de 2017
Respostas 7
Participantes 2
Alura O que é Front-end, Back-end e Full Stack? Aprenda as diferenças entre essas áreas Front-end, Back-end e Full Stack: conheça as características e as linguagens das principais áreas de programação
Casa do Codigo Coletanea Front-end: Uma antologia da comunidade... Por Almir Filho, Bernard De Luna — Casa do Codigo