13

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

Sir
  • 8,135
  • 17
  • 83
  • 146

7 Answers7

4

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.

DA.
  • 39,848
  • 49
  • 150
  • 213
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>
idmean
  • 14,540
  • 9
  • 54
  • 83
Rohit Azad Malik
  • 31,410
  • 17
  • 69
  • 97
2

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.

Grzegorz
  • 3,207
  • 3
  • 20
  • 43
1

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.

j08691
  • 204,283
  • 31
  • 260
  • 272
  • Ah this did work although its not totally center for me ... is there a trick to getting them nice and centered? – Sir Jun 05 '12 at 03:56
0

That should do the trick : 

 <div class="wrapper">
     <div style="width:850px">
        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>
     </div>
 </div>

And that will be supported on any browser. http://jsfiddle.net/5GrKU/3/

tibo
  • 5,326
  • 4
  • 37
  • 53
0

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>

CSS

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

for you reference i have also added the URL of the demo. http://jsfiddle.net/sg8FE/

UPDATE

just change display:inline in wrapper class to display:block rest all is right and the div's are centered.

Murtaza
  • 3,045
  • 2
  • 25
  • 39
  • how can i get the 4 of them to be centered in the parent div? – Sir Jun 05 '12 at 04:16
  • refer this http://jsfiddle.net/sg8FE/1/ your problem is solved... replaced `display:inline` from wrapper class to `display:block` – Murtaza Jun 05 '12 at 04:27
0

by giving a fixed width in your inner divs you are forcing them to have that width no matter what is the size of the view port. And giving the outer div a width of 80% you are shrinking its size with the width of your view port. You need to do either giving fixed width to all those divs or giving a relative width to all.

maksbd19
  • 3,785
  • 28
  • 37