Is this the right way to space four news blocks right from each other?
I wouldn't say that there's a right or a wrong way to do it.  The only problem with what you're doing is that it only works well when you have a device that is wide enough to display all of those items on one line (ie. it doesn't work so well for handheld devices).

My recommendation would be to use the CSS multi-column module, which is responsive by default without having to use media queries.

http://jsfiddle.net/cTM3L/1/

&lt;div id="wrapper"&gt;
    &lt;div id="header"&gt;
            &lt;div id="logo"&gt; &lt;a href="index.html"&gt;&lt;img src="img/logo.png" alt="logo"&gt;&lt;/a&gt;

            &lt;/div&gt;
    &lt;/div&gt;
    &lt;ul id="headNews"&gt;
            &lt;li class="headNewsItem"&gt;
                &lt;a href="#"&gt;
                    &lt;div class="imageContainer"&gt;
                         &lt;img src="img/headNews1.jpg" width="242" height="124" alt="headNewsImage1"&gt;
                    &lt;/div&gt;
                    &lt;p class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
                &lt;/a&gt;
            &lt;/li&gt;

            &lt;li class="headNewsItem"&gt;
                &lt;a href="#"&gt;
                    &lt;div class="imageContainer"&gt;
                         &lt;img src="img/headNews2.jpg" width="242" height="124" alt="headNewsImage2"&gt;            
                    &lt;/div&gt;
                    &lt;p class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
                &lt;/a&gt;
            &lt;/li&gt;

            &lt;li class="headNewsItem"&gt;
                &lt;a href="#"&gt;
                    &lt;div class="imageContainer"&gt;
                         &lt;img src="img/headNews3.jpg" width="242" height="124" alt="headNewsImage3"&gt;
                    &lt;/div&gt;
                    &lt;p class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
                &lt;/a&gt;
            &lt;/li&gt;

            &lt;li class="headNewsItem"&gt;
                &lt;a href="#"&gt;
                    &lt;div id="imageContainer"&gt;
                         &lt;img src="img/headNews4.jpg" width="242" height="124" alt="headNewsImage4"&gt;
                    &lt;/div&gt;
                    &lt;p class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/p&gt;
                &lt;/a&gt;
            &lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="midSection"&gt;fasdfasf&lt;/div&gt;
&lt;/div&gt;


The CSS:

@import url(reset.css);
 body {
    background: url("../img/bg.jpg") repeat-x;
}
#wrapper {
    margin: 0 auto;
}
#header {
    height: 70px;
}
#logo img {
    float: left;
    margin-top: 20px;
}
#headNews {
    margin-top: 20px;
    -webkit-columns: 242px;
    -moz-columns: 242px;
    columns: 242px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
    list-style: none;
    padding-left: 0;
}
.headNewsItem {
    margin-right: 4px;
    width: 242px;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid; /* Moz is weird */
    break-inside: avoid;
    margin-top: 10px;
}
.headNewsItem:first-child {
    margin-top: 0;
}
.headNewsItem a, .headNewsItem img {
    display: block;
}
.textContainer {
    font-family: Arial;
    line-height: 21px;
    font-size: 14px;
    color: #c8cbcb;
    height: 40px;
    padding: 10px 15px;
    background-image: linear-gradient(#262828, #1c1e1e);
}
#midSection {
    width: 100%;
    margin-top: 20px;
    background-color: #FFF;
}


There's quite a few other things I would change here, but most of them are not relevant to the requested reviewed.  Just make sure you're using the most specific tag that appropriately describes your content: avoid using div for everything (check out some of those HTML5 tags you seem to have missed such as header, figure/figcaption, aside, etc.).  Also, there are better ways to clear floats than to use more floats.