Element alignment issues

Question

I'm having an issue aligning my elements.

I have elements that are appearing inside the others, like for example my paragraph with red background is above my image, and my second article is above my first article.

I have already tried many tests with floats but it's not working.

Do you see where the problem is?

Here is an example showing my problem: http://jsfiddle.net/2tsmX/3/

My html:

<div id="body_news">
    <div id="body-news1">
        <h1>News</h1> 
        <article id="news">
            <div class="img_container">
                <img  src="../image.jpg"/>        
            </div>
            <h2><a href="#" >Títule Of the News</a></h2>
            <span>Date of the news</span>
            <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
            </p>
        </article> 
        <article id="news">
            <div class="img_container">
                <img  src="../image.jpg"/>        
            </div>   
            <h2><a href="#" >Títule Of the News</a></h2>
            <span>Date of the news</span>
            <p>text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
            </p>
        </article>
    </div>
</div>

My css:

#body_news1
{
    float:left;
    width:480px;
}

#body_news1 h1
{
    font-size:25px;
    font-weight:100;
    margin-bottom:10px;
}

.img_container
{
   width: 160px;
   height: 165px;
   float: left;
   overflow: hidden;
   position: relative;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;   
}

#body_news
{
    width:480px;
    height:auto;
    margin:0 auto 0 auto;
}

#news
{
    margin-bottom:5px; 
    position:relative;
    background:yellow;
     width:480px;
    text-align:left;
}

#news h2 a
{
    font-size:20px;  
    color:#000; 
    text-decoration:none;
    margin-left:0;
}

#news span 
{   
    font-size:14px; 
}

#news p
{
    margin-top:5px;
    margin-bottom:5px;
    background:red; 
}

Answer 1

Are you trying to do something like this?

HTML

<div id="body_news">
    <div id="body-news1">
        <h1>News</h1> 
        <article class="news">
                <div class="img_container">
                    <img  src="../image.jpg"/>        
                </div>
                <h2><a href="#" >Title Of the News</a></h2>
                <span>Date of the news</span>
                <p>
               text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
               </p>
         </article> 
          <article class="news">
                <div class="img_container">
                    <img  src="../image.jpg"/>        
                </div>   
                <h2><a href="#" >Title Of the News</a></h2>
                <span>Date of the news</span>
                <p>
               text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
               </p>
        </article>
  </div>
</div>

CSS

#body_news1
{
width:480px;
}

#body_news1 h1
{
font-size:25px;
font-weight:100;
margin-bottom:10px;
}

.img_container
{
   width: 160px;
   height: 165px;
   float: left;
   text-align: center;
   box-shadow: 0px 0px 5px #aaa;
   cursor: default;
   margin-right:20px; 
   border:3px solid #f3f3f3;
   margin-top:4px;   
}

#body_news
{
width:480px;
margin:0 auto 0 auto;
}

.news
{
margin-bottom:5px; 
background:yellow;
    min-height:185px;
}

.news h2 a
{
font-size:20px;  
color:#000; 
text-decoration:none;
    margin-left:0;
}

.news span 
{   
font-size:14px; 
}

.news p
{
margin-top:5px;
margin-bottom:5px;
background:red; 
}

http://jsfiddle.net/2tsmX/9/

Answer 2

Simple fix - Add <div style="clear:both;"></div> after the <span>Date of the news</span> of each div

Example:

<div id="body_news">
        <div id="body-news1">
            <h1>News</h1> 
            <article id="news">
                    <div class="img_container">
                        <img  src="../image.jpg"/>        
                    </div>
                    <h2><a href="#" >Títule Of the News</a></h2>
                    <span>Date of the news</span>
           <div style="clear:both;"></div> <!--HERE-->
                    <p>
                   text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
                   </p>
             </article> 
              <article id="news">
                    <div class="img_container">
                        <img  src="../image.jpg"/>        
                    </div>   
                    <h2><a href="#" >Títule Of the News</a></h2>
                    <span>Date of the news</span>
            <div style="clear:both;"></div> <!--HERE-->
                    <p>
                   text here text here text here text here text here text here text here text here text here text here text here text here text here text here text here 
                   </p>
            </article>
      </div>
</div>

FIDDLE