Alimenta de 3 divs css.

[bnogueira02 2]

To quebrando a cabeça mas ainda não consegui resolver. Tenho 3 divs e preciso alinhas horizontalmente. Elas ate alinha com o float: left; porem não sobe ao to aonde deveria ficar. Coloque a div que esta com erro em vermelho para melhor entendimento.

 

A div vermelha tem que chegar ao topo juntamente com o titulo esporte.

 

section.divnoticia.tres{
	width: 60%;	
	float: left;
	position: relative;
	top: 30px;
	height: 219px;
	margin-bottom: 20px;
}
section.divnoticia.tres article.noticia {
  width: 32.3%;
  margin: 0.5%;
  height: 200px;
  float: left;
}
section.divnoticia .publicidade.esportes{
	color: #3C0;
	font-size: 12px;
	padding-bottom: 3px;
	border-bottom: 1px dashed #3C0;
}
section.divnoticia .publicidade.entretenimento {
	color: #F60;
	font-size: 12px;
	padding-bottom: 3px;
	border-bottom: 1px dashed #F60;
}

.propagandap2{
	width:384px;
	margin-left: 20px;
	height: 458px;
	float:left;
	background: #f00;
}

<section class="divnoticia tres">
    <h6 class="publicidade esportes">Esportes</h6>
    <article class="noticia"> <a href="#"> <img src="" />
      <h3 class="esportes">Teste</h3>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos...</p>
      </a> </article>
    <article class="noticia"> <a href="#"> <img src="" />
      <h3 class="esportes">Teste</h3>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos...</p>
      </a> </article>
    <article class="noticia"> <a href="#"> <img src="" />
      <h3 class="esportes">Teste</h3>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos...</p>
      </a> </article>
  </section>
  
  
  
  <section class="divnoticia tres">
    <h6 class="publicidade entretenimento">entretenimento</h6>
    <article class="noticia"> <a href="#"> <img src="" />
      <h3 class="entretenimento">Teste</h3>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos...</p>
      </a> </article>
    <article class="noticia"> <a href="#"> <img src="" />
      <h3 class="entretenimento">Teste</h3>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos...</p>
      </a> </article>
    <article class="noticia"> <a href="#"> <img src="" />
      <h3 class="entretenimento">Teste</h3>
      <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos...</p>
      </a> </article>
  </section>
  <section class="propagandap2">
  		<h6 class="publicidade">PUBLICIDADE</h6>
  </section>
  <div class="clear"></div>

[Maujor 144]

Crie um container para as section.tres.
Veja neste link.