Boxes Sobrepostos, como resolver?

[MalCriada 1]

Boa noite,

Tenho uma dúvida.

Estou criando um site mas os boxes onde o conteúdo é mais longo tem ficado da forma que mostra a imagem abaixo:

 

Segue abaixo o CSS:

#destaques_container{
	margin: 0 auto;
}

#destaques_container_dentro{
	float: left;
	margin-left: 25px;
	margin-bottom: 35px;
	display: inline;
    min-height: 190px; 
	font-family: 'Signika', Arial, Verdana;
	font-size:16px;
}
.box_shadow_preview{ 
	position: absolute;
	display: inline-block;
    min-height: 190px; 
    background-color: #FFFFFF; 
    border-width: 1px; 
    border-style: solid; 
    border-color: #DDDDDD; 
    border-radius: 0px; 
-webkit-box-shadow: 2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-moz-box-shadow:    2px 2px 16px 0px rgba(52, 84, 109, 0.65);
box-shadow:         2px 2px 16px 0px rgba(52, 84, 109, 0.65);
-webkit-border-radius: 99px 20px 0px 20px;-moz-border-radius: 99px 20px 0px 20px;border-radius: 99px 20px 0px 20px;
} 
#destaques_line{
	width: 100%;
	display: block;
	clear: both;
}

@media screen and (max-width: 1024px) {
	#destaques_container{
		width: 1002px;
	}
#destaques_container_dentro{
	width: 46%;
	font-size:16px;
}

.box_shadow_preview{ 
	width: 46%;
} 
	
}

Segue abaixo o código das divs:

    <div id="destaques_container_dentro">
		<div class="box_shadow_preview">
			<div id="destaques_line">
				<br /><br /><br /><br /><br /><br /><br /><br /><br />
			</div>
		</div> 
	</div>
    <div id="destaques_container_dentro">
		<div class="box_shadow_preview">
			<div id="destaques_line">
				<br /><br /><br /><br /><br />
			</div>
		</div> 
	</div>
    <div id="destaques_container_dentro">
		<div class="box_shadow_preview">
			<div id="destaques_line">
				<br /><br /><br /><br /><br />
			</div>
		</div> 
	</div>
    <div id="destaques_container_dentro">
		<div class="box_shadow_preview">
			<div id="destaques_line">
				<br /><br /><br /><br /><br />
			</div>
		</div> 
	</div>

Poderiam por favor me ajudar com alguma dica de que recurso utilizar para que quando um box tiver o conteúdo maior, os seguintes fiquem mais distantes como ocorre quando o box está com a altura máxima de 190px.

 

Desde já agradeço pela atenção de todos! :hug:

[rikaschmitt 54]

Não estou com muito tempo para testar, mas tenta retirar o "position: absolute" da .box_shadow_preview

[MalCriada 1]

Não estou com muito tempo para testar, mas tenta retirar o "position: absolute" da .box_shadow_preview

 

Obrigada pela resposta rikaschmitt, eu já havia tentando isso também, já fiz várias tentativas antes de perguntar aqui, mas não fica certo, o elemento precisa ter a posição absoluta senão causa outros erros. De qualquer forma agradeço muito pela atenção!

[rikaschmitt 54]

Então, agora consegui analisar melhor.

Uma dica importante é usar apenas um único ID em todo o documento. No seu caso você usou um mesmo ID em várias repetições, o que não pode. ID é único. Para isso utilize class mesmo.

 

Tentei modificar um pouco seu código..

consegui isso http://jsfiddle.net/m3851tcp/

 

talvez ajude.

[MalCriada 1]

Então, agora consegui analisar melhor.

Uma dica importante é usar apenas um único ID em todo o documento. No seu caso você usou um mesmo ID em várias repetições, o que não pode. ID é único. Para isso utilize class mesmo.

 

Tentei modificar um pouco seu código..

consegui isso http://jsfiddle.net/m3851tcp/

 

talvez ajude.

 

Nossa imagina se ajudou... ajudou demais!!!

Muito obrigada mesmo!!! :clap: :worship:

Valeu!