Prevent float left div from going to a new line

Question

I have 4 divs that are set to float left but the end div keeps wrapping two a new line on a smaller screen which is really annoying me...i want them to scale with the screen size so they always stay on the same line regardless of screen size... and im trying not to use a table (which is very tempting giving they v.reliable for this!!!)

I'm wondering how to fix this annoying issue so they always stay in position regardless of screen size??

I have this as my CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

My HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

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

 </div> 



</div>

Please help :D

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

You can try removing the table-cell display rule from the wrapper and setting percentages (or min-widths) on the child divs like this jsFiddle example.