CSS Issues Place Second Article Element Above First

Question

I have a section with two news articles the html is correct but the result of the CSS is the second article is above the first. Any suggestions are appreciated thanks in advance.

Here is an image of the result:

My jsfiddle: http://jsfiddle.net/mibb/5sype/2/

My html:

<section id="loop-news-container">
<h2>NEws</h2>
    <article id="loop-news">
         <a href="#"></a>
         <h1><a href="#">Title of News</a></h1>
         <span>Date of Post 1</span> 
         <img src="image1.jpg" /> 
          <p>Post 1. <a  href="#" >read more</a></p>
    </article>
    <article id="loop-news">
     <a href="#"></a>
         <h1><a href="#">Title 2 Inside of the Post 1</a></h1>
         <span>Date 2 inside of Post 1</span> 
         <img src="image1.jpg" /> 
          <p>Post 2 inside of Post 1<a  href="#" >read more</a></p>
    </article>

</section>

My css:

#loop-news-container {
    width:100%;
    height:auto;
    float:left;
    margin-top:5px;

}
#loop-news {
    width:320px;
    height:250px;
    background:#fff;
   margin-top:10px;
    margin-bottom:10px;
    text-align:center;
    border-bottom:1px solid #f3f3f3;


}
#loop-news-container h2{font-family:'arial';
    font-size:25px;
    margin-bottom:10px;
    font-weight:100;
    color:green; 
    text-align:center;}

#loop-news h1 {
    font-family:'arial';
    text-align:center;
    font-family:'arial';
    margin:0 auto 0 auto;
    position:relative;
    text-decoration:none;
}

#loop-news p {font-family:'arial';
    font-size: 17px;  
    text-align:justify;
    line-height:25px;
    height:25px;
    width:310px;
    margin:0 auto;
    }

#loop-news h1 a {
    text-decoration:none;
    font-size:20px;
    color:yellow;
    font-weight:100;
    font-family:'arial';
}
#loop-news span {
    font-family:'bariolthin';
    font-size:14px;
    font-weight:normal;
    color:blue;
    margin:0 auto 0 auto;
    text-align:center;

}

#loop-news a {font-family:'arial';
    font-size:14px; 
    text-decoration:none;
    color:red;
    margin-left:2px;}

#loop-news img {margin-top:5px;margin-bottom:5px; width:246px;}

Answer 1

You really already received the correct answer because the height on your element was fixed there was no room for the rest of the html. Since I could not paste code in an comment and I upvoted the given answer I thought I would throw some example code your way. I hope this is what you are looking for and it helps you out. This is what is meant by using classes instead of id's also for core elements you do not need to add parent selector.

#loop-news-container {
width:100%;
height:auto;
float:left;
margin-top:5px;
}

.loop-news {
width:320px;
height:auto;
background:#fff;
margin-top:10px;
margin-bottom:10px;
text-align:center;
border-bottom:1px solid #f3f3f3;
}

h2 {
font-family:arial;
font-size:25px;
margin-bottom:10px;
font-weight:100;
color:green;
text-align:center;
}

h1 {
text-align:center;
font-family:arial;
position:relative;
text-decoration:none;
margin:0 auto;
}

p {
font-family:arial;
font-size:17px;
text-align:justify;
line-height:25px;
width:310px;
margin:0 auto;
}

a {
text-decoration:none;
font-size:20px;
color:#FF0;
font-weight:100;
font-family:arial;
}

span {
font-family:bariolthin;
font-size:14px;
font-weight:400;
color:blue;
text-align:center;
margin:0 auto;
}

img {
margin-top:5px;
margin-bottom:5px;
width:246px;
}


<section id="loop-news-container">
  <h2>NEws</h2>
  <article class="loop-news">
  <a href="#"></a>
  <h1><a href="#">Title of News</a></h1>
  <span>Date of Post 1</span> 
  <img src="image1.jpg" /> 
  <p>Post 1. <a  href="#" >read more</a></p>
  </article>
  <article class="loop-news">
  <a href="#"></a>
  <h1><a href="#">Title 2 Inside of the Post 1</a></h1>
  <span>Date 2 inside of Post 1</span> 
  <img src="image1.jpg" /> 
  <p>Post 2 inside of Post 1<a  href="#" >read more</a></p>
  </article>
</section>

Answer 2

This is because you give a fixed height to article.

#loop-news {
    /*height:250px;*/
}

Recommendation: use class insted of id.