Problema com Div e position relative [RESOLVIDO]

Front-end CSS
#1

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?

#2

Oi… Boa Tarde!
Vc pode postar o código aqui e tirar um print de como fico?

1 curtida
#3

<!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>
		&#160; &#160; &#160; &#160; 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>
#4
  • {
    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;
}

#5 
<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.

#6

WhatsApp Image 2017-10-26 at 16.16.23.jpeg1040×585 80 KB

#7

Tenta usar >>

#segunda-seção{
float: left;
margin-top: 380px;
margin-left: -230px;
}
1 curtida
#8

obrigado!

1 curtida