5

I'm trying to place some divs, with this rule: Fill first column where possible, then (when first column is full) fill the second column, etc. (Please see the image below)

This is what I want to have: (created with Paint!)

Goal

In the image above, as you can see, first column has 1,2,3,4 and there is not enough vertical space to put 5 in the first column. So 5 should be placed on the second column...

I've tried to create something like the image above using float:left, but this is the result:

Current code

How to create something like the first image? What's wrong with my current code (which creates the second image)?


This is my HTML code:

<div class="container">
<div class="i1">1</div>
<div class="i1">2</div>
<div class="i1">3</div>
<div class="i1">4</div>
<div class="i2">5</div>
<div class="i3">6</div>
<div class="i1">7</div>
<div class="i1">8</div>
</div>

​And this is my CSS:

.container {
    overflow:scroll;
    width:10000px;
    height:200px;
    background:skyblue;    
    position:absolute;
}
.i1,.i2,.i3 {
    float:left;    
    width:100px;
    background:lime;
    border-radius: 20px;
    text-align:center;
}
.i1 {
    height:33px;
}
.i2 {
    height:66px;   
}
.i3 {
    height:100px;   
}

Fiddle of my code

3
  • What do you mean by "fill if possible?"
    – Kyle
    Nov 22, 2012 at 8:39
  • You mean column, right? Rows are horizontal and columns vertical. I think you might need some extra markup to do what you want.
    – Kyle
    Nov 22, 2012 at 8:41
  • 1
    change the word row into column in your question and I'll give you a +1 to compensate for the -1 that you have now. I do think your question is good but the word row makes it confusing when you mean column
    – Bazzz
    Nov 22, 2012 at 8:48

3 Answers 3

7

just modern tablets and smartphones should show it correctly

In that case, use CSS3 columns. The browser support should be good enough.

http://jsfiddle.net/thirtydot/AQ7bp/4/

.container {
    -webkit-column-width: 100px;
    -moz-column-width: 100px;
    column-width: 100px;

    -webkit-column-gap: 5px;
    -moz-column-gap: 5px;
    column-gap: 5px;
}
.i1,.i2,.i3 {
    display: inline-block;
    vertical-align: top;
}
10
  • Nice, and pure CSS! Thank you very much! Nov 22, 2012 at 9:52
  • Can you explain why set percent to column-width is not working? jsfiddle.net/AQ7bp/7 I just want column-width to be 20% of width of the window. Nov 22, 2012 at 9:56
  • I believe that the desired way to do column-width: 20% is column-count: 5;: jsfiddle.net/thirtydot/AQ7bp/8 (I had to get rid of width:10000px;.)
    – thirtydot
    Nov 22, 2012 at 10:00
  • There may be more than 5 columns, and user should be able to scroll. So column-count: 5; is not suitable for my problem Nov 22, 2012 at 10:08
  • Well, I'm not sure I understand. My previous demo seems to visually match what you're asking for. Here's an attempt at doing exactly what you asked for: jsfiddle.net/thirtydot/AQ7bp/14 (a small amount of JavaScript was needed, can be done without jQuery if necessary)
    – thirtydot
    Nov 22, 2012 at 10:11
3

You will have to separate the columns into extra divs. Float left aligns elements horizontally, so they will behave like words in a sentence. Wrapping each section of divs and floating the wrapper left creates the effect you desire, but only in this specific case. If this is to be more dynamic, you might have to re-think your design.

HTML:

<div class="container">
    <div class="wrap">
        <div class="i1">1</div>
        <div class="i1">2</div>
        <div class="i1">3</div>
        <div class="i1">4</div>
    </div>
    <div class="wrap">
        <div class="i2">5</div>
        <div class="i3">6</div>
    </div>
    <div class="wrap">
        <div class="i1">7</div>
        <div class="i1">8</div>
    </div>
</div>​

CSS:

.container {
    overflow:scroll;
    width:10000px;
    height:200px;
    background:skyblue;    
    position:absolute;
}

.wrap
{
    float: left;
    width: 102px;
}

.i1,.i2,.i3 {   
    width:100px;
    background: #000;
    border-radius: 20px;
    text-align:center;
    color: #fff;
}
.i1 {
    height:33px;
}
.i2 {
    height:66px;   
}
.i3 {
    height:100px;   
}​

http://jsfiddle.net/Kyle_Sevenoaks/PyT5w/ (I changed the colors because they hurt my eyes.)


After some clarifications on the question, if this is to be dynamically populated with shifting heights then there is no solution that doesn't use some crazy Javascript. You'll have to come up with another design.

5
  • Thanks for your code, but the problem is, the count of rows in each column may change in different browser sizes, or tablet orientation. Nov 22, 2012 at 8:49
  • This way number 5 can never end up in the first column.
    – Bazzz
    Nov 22, 2012 at 8:50
  • using a little javascript is not a problem for me, But just a little (tablets are slow in javascript). Does it need a huge javascript processing? Nov 22, 2012 at 8:58
  • It won't be a pages long script but it won't be simple either. I can try to help you come up with a solution, but it is a strange design you have and might not display correctly cross browser/device.
    – Kyle
    Nov 22, 2012 at 9:00
  • @KyleSevenoaks It's a web application, and just modern tablets and smartphones should show it correctly :) Nov 22, 2012 at 9:01
2

You can probably make it work with flexbox. I'm not sure about the support in iOS browsers but newer webkit browsers do support it so it might be worth a look.

.container {
  overflow:scroll;
  width:10000px;
  height:200px;
  background:skyblue;    
  display: -webkit-flex;
  -webkit-flex-flow: column wrap;
}
1
  • I've checked this method, almost working perfectly: jsfiddle.net/AQ7bp/3 But it is putting the last column on the end of .container. Can you fix it? (to be same as the first image in the question) Nov 22, 2012 at 9:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.