Is this the right way to space four news blocks right from each other? I am working on a website and I've created four text/image news blocks.  I am not sure if it's the right / most efficient way to do this.

See my code here at jsfiddle

HTML:

&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;div id="headNews"&gt;
        &lt;div 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;div class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/div&gt;
           &lt;/a&gt;
        &lt;/div&gt;
        &lt;div 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;div class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/div&gt;
           &lt;/a&gt;
        &lt;/div&gt;
        &lt;div 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;div class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/div&gt;
           &lt;/a&gt;
        &lt;/div&gt;
        &lt;div id="headNewsItemLast"&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;div class="textContainer"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit&lt;/div&gt;
           &lt;/a&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="midSection"&gt;
        fasdfasf

     &lt;/div&gt;
&lt;/div&gt;


CSS:

body{
background: url("../img/bg.jpg") repeat-x;
}

#wrapper{
margin: 0 auto;
width: 980px;
}

#header{
float: left;
width: 100%;
height: 70px;
}

#logo img{
float: left;
margin-top: 20px;
}

#headNews{
float: left;
margin-top: 20px

}

.headNewsItem{
float: left;
margin-right: 4px;
width: 242px;
height: 184px;
}

#headNewsItemLast{
float: left;
width: 242px;
height: 184px;
}

.headNewsItem  img {
display: block;
}

#headNewsItemLast 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{
float:left;
width: 100%;
height: 800px;
margin-top: 20px;
background-color: #FFF;

}
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.