Prevent float left div from going to a new line

Although this is an old post, I think that the problem, which I also run into, is the fact that you want all these cells to be of a fixed size, and not %, right? The solution you chose changed initial format where you specified width:200px;

Well, I would suggest to look here: http://jsfiddle.net/gn2bg/

The ONLY one thing I did is to add inner wrapper around your cells:

.inwrapper{
    float:left;
    overflow: hidden;
    min-width: 830px;
}

and new html as this:

<div class="wrapper">
  <div class="inwrapper">
    <div class="gridf"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="gridl"></div>
  </div>
</div> 

Notice that your wrapper requires 80% of space. The inwrapper, however, tells that its size is fixed - 830px (total of all internal div sizes plus room for padding.) This way inwrapper uses 'elbows' to stretch the width, and override these 80% of 'wrapper'

I understand that you already made decision as to what is your best solution. I am leaving this response to anyone else in the future who needs exact answer to your exact question.

Hi i think you should this check to this demo

.wrapper {
  margin: 0 auto;
  width: 80%;
  border: solid 1px red;
  overflow: hidden;
}
.gridf,
.grid,
.gridl {
  Background: green;
  width: 24%;
  min-height: 100px;
  float: left;
  margin: 2px 0;
}
.gridf {} .grid {
  margin: 2px 1%;
}
.gridl {
  background: yellow;
}

<div class="wrapper">

  <div class="gridf">One</div>
  <div class="grid">Two</div>
  <div class="grid">Three</div>
  <div class="gridl">Four</div>

</div>

Your wrapper is a percentage width container with 4 fixed-width child elements floated.

The width of the wrapper is dependent on the width of the viewport. If the viewport is narrowed to the point that the wrapper's width is less than that of the 4 child element widths together, then naturally they won't all fit and therefore will wrap.

The fix is to make sure your wrapper doesn't get smaller than the combination of the children.

So, add up with widths, borders and margins of the child elements and then give the wrapper a min-width attribute equal to that.